JSFiddle - React, Tailwind, and code Playground
HTML
<div class="equipa_membro">
<div class="equipa_foto equipa_foto1">
<div class="equipa_ft_tr equipa_ft1_tr1"></div>
<div class="equipa_ft_tr equipa_ft1_tr2"></div>
<div class="equipa_ft_tr equipa_ft1_tr3"></div>
<div class="equipa_ft_tr equipa_ft1_tr4"></div>
<div class="equipa_ft_tr equipa_ft1_tr5"></div>
<div class="equipa_ft_tr equipa_ft1_tr6"></div>
</div>
<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>
</div>
CSS
.equipa_membro {
height: 320px;
margin-top: 50px;
}
.equipa_foto {
width: 282px;
height: 244px;
margin: 0 auto;
}
.equipa_ft_tr {
width: 141px;
height: 122px;
}
.equipa_ft1_tr1 {
background: url(http://i.imgur.com/bWmQT4W.png);
position: absolute;
margin: 0px 0px;
}
.equipa_ft1_tr2 {
background: url(http://i.imgur.com/J5gfHDl.png);
position: absolute;
margin: 0px 70px;
z-index: 1000;
}
.equipa_ft1_tr3 {
background: url(http://i.imgur.com/Jlvgyya.png);
position: absolute;
margin: 0px 141px;
}
.equipa_ft1_tr4 {
background: url(http://i.imgur.com/EMvj02v.png);
position: absolute;
margin: 122px 140px;
}
.equipa_ft1_tr5 {
background: url(http://i.imgur.com/7QW7UDT.png);
position: absolute;
margin: 122px 70px;
z-index: 1000;
}
.equipa_ft1_tr6 {
background: url(http://i.imgur.com/nvdwhzj.png);
position: absolute;
margin: 122px 0px;
}
.equipa_ft_tr {
transition: margin 0.5s ease-in-out;
}
JavaScript
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();
});