How to animate the divs and caption arrangement, when hovering in one of these elements?

Here are two alternatives:

# 1 - using CSS transitions for the background image url

var linkImagens;
var divImagens;
$('.equipa_membro').hover(function () {
    divImagens = $(this).find('.equipa_ft_tr');
    linkImagens = divImagens.map(function () {
        return {
            top: $(this).css('margin-top'),
            left: $(this).css('margin-left')
        };
    })
    var qtdImagens = divImagens.length;
    divImagens.each(function (i) { // re-organizar os links
        var imagemAusar = (i + 2) < qtdImagens ? i + 2 : i - qtdImagens + 2;
        $(this).css('margin', linkImagens[imagemAusar]);

    });

        $(this).find('.nome_equipa1').toggle(); // mostrar o que está invisivel e esconder o que está visivel
        $(this).find('.funcao_equipa1').toggle(); // mostrar o que está invisivel e esconder o que está visivel
}, function () {
    divImagens.each(function (i) {
        $(this).css('margin', linkImagens[i]);
    });
        $(this).find('.nome_equipa1').toggle();
        $(this).find('.funcao_equipa1').toggle();
});

CSS

.equipa_ft_tr{
    transition: background-image 0.5s ease-in-out;
}

Example

# 2 - Using CSS transitions for the position (margin) of background images

var linkImagens;
var divImagens;
$('.equipa_membro').hover(function () {
    divImagens = $(this).find('.equipa_ft_tr');
    linkImagens = divImagens.map(function () {
        return {
            top: $(this).css('margin-top'),
            left: $(this).css('margin-left')
        };
    })
    var qtdImagens = divImagens.length;
    divImagens.each(function (i) {
        var imagemAusar = i >= 2 ? i - 2 : i + 4;
        $(this).css('margin-top', linkImagens[imagemAusar].top);
        $(this).css('margin-left', linkImagens[imagemAusar].left);
    });
    $(this).find('.nome_equipa1').toggle();
    $(this).find('.funcao_equipa1').toggle();
}, function () {
    divImagens.each(function (i) {
        $(this).css('margin-top', linkImagens[i].top);
        $(this).css('margin-left', linkImagens[i].left);
    });
    $(this).find('.nome_equipa1').toggle();
    $(this).find('.funcao_equipa1').toggle();
});

CSS

.equipa_ft_tr {
    transition: margin 0.5s ease-in-out;
}

Example

In both of the above suggestions I have reordered the images to make the javascript simpler. So the images are:

1 2 3
4 5 6

In addition to this change, I also use this HTML to show / hide the right text:

<h5 class="nome_equipa1">oNem od bmoerM</h5>
<h5 class="nome_equipa1" style="display:none">Nome do Membro</h5>
<p class="funcao_equipa1">ãnuonçF edsepDamehane</p>
<p class="funcao_equipa1" style="display:none">Função Desempenhada</p>

Put the following in the HTML. The max-width is necessary because without it it is as if the text occupies the whole screen horizontally:

<h5 id="texto" style="max-width: 150px" class="nome_equipa1 texto">oNem od bmoerM</h6>
<p id="texto2" style="max-width: 150px" class="funcao_equipa2 texto">ãnuoçF edsepDamehane</p>
<img src="imgembaralhada.jpg" id="image2" />
<img src="imgnormal.jpg" id="image1" />

And the following in JavaScript. Do not forget to put the jQuery script link http://code.jquery.com/jquery-1.11.0.min.js :

$(document).ready(function(){
    //Colocando o mouse sobre o texto(mousemove)
    $('#texto').on("mousemove", function(){
        $(this).text("Nome Do Membro");
    })
    //Retirando o mouse sobre o texto(mouseout)
    $('#texto').on("mouseout", function(){
        $(this).text("oNem oD bmoerM");
    })
    //Colocando o mouse sobre o texto(mousemove)
    $('#texto2').on("mousemove", function(){
        $(this).text("Função Desempenhada");
    })
    //Retirando o mouse sobre o texto(mouseout)
    $('#texto2').on("mouseout", function(){
        $(this).text("ãnuoçF edsepDamehane");
    })
    //Colocando o mouse sobre o texto(mousemove)
    $('#image2').on("mousemove", function(){
        $(this).attr("src","imgnormal.jpg");
    })
    //Retirando o mouse sobre o texto(mouseout)
    $('#image1').on("mouseout", function(){
        $(this).attr("src","imgmbaralhada.jpg");
    })
})