Solution:

Reason and because of the solution: I will use a utility OData plate, used in SharePoint 2013 and 2010 When migrating from 2010 to 2013 will not have conflict.

If you want to know more follow the link: http://msdn.microsoft.com/en-us/library/hh166950(v=nav.71).aspx

First step:

See how are the names of each column: In your script put the following code:

$.ajax({
    async: false,
    url: "http://www.[DOMAIN].com.br/_api/web/lists/getbytitle('[NAME LIST]')/items()",
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    success: function(data){
        console.log(data);
    }
});

Remember to change the values ​​in the URL there.

Open the console of your browser and see what it returns with their information for your list.

Second step:

I created a script that does everything you want. Below:

// Created by: Renan Fiedler de Oliveira
// From: Brazil
var clients = new Array();
var htmlViewClients = '';
$(document).ready(function(){
    $('#viewClients').html('');
    $.ajax({
        async: true,
        url: "http://www.DOMAIN.com.br/_api/web/lists/getbytitle('Campaigns')/items?$top=10000",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function(data){
            for(var i=0;i<data.d.results.length;i++){
                clients.push({background: data.d.results[i].Image, title: data.d.results[i].Title,  link: data.d.results[i].Link});
                if(i%3 == 0){
                    if(i != 0){
                        htmlViewClientes += '</tr>';
                    }
                    htmlViewClientes += '<tr>';
                }
                htmlViewClients += '<td id="link'+i+'">'
                +'<a href="'+clients[i].link+'" style="text-decoration: none;">'
                +'<div style="width: 150px; height: 150px; overflow:hidden; background-image: url('+clients[i].background+')">'
                +'<div id="data'+i+'" style="width: 84%; height: 100%; padding: 8%; position: relative; top: 63%; background-color: rgba(0, 0, 0, 0.6); color: white">'
                +'<p>'+clients[i].title+'</p>'
                +'</div>'
                +'</div>'
                +'</a>'
                +'</td>';
                if(i+1 == data.d.results.length){
                    htmlViewClients += '</tr>';
                }
            }
            $('#viewClients').append(htmlViewClients);
            for(var j=0;j<clients.length;j++){
                $('#data'+j)
                .mouseenter(function() {
                    $(this).animate({
                        top:'0%'
                    });
                })
                .mouseleave(function() {
                    $(this).animate({
                        top:'65%'
                    });
                });
            }
        },
        error: function(){
            console.log('Error');
        }
    });
});

Third step:

In the body of your page Insera a table with id = "viewClients" and insert the jquery (http://jquery.com/download/) and his script on your page.

Remember to change the names of variables and url. Put everything in its place for your problem not occur.

I am available to help you.