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/Jlvgyya.png);
position: absolute;
margin: 0px 0px;
}
.equipa_ft1_tr2 {
background: url(http://i.imgur.com/EMvj02v.png);
position: absolute;
margin: 0px 70px;
z-index: 1000;
}
.equipa_ft1_tr3 {
background: url(http://i.imgur.com/7QW7UDT.png);
position: absolute;
margin: 0px 141px;
}
.equipa_ft1_tr4 {
background: url(http://i.imgur.com/nvdwhzj.png);
position: absolute;
margin: 122px 140px;
}
.equipa_ft1_tr5 {
background: url(http://i.imgur.com/bWmQT4W.png);
position: absolute;
margin: 122px 70px;
z-index: 1000;
}
.equipa_ft1_tr6 {
background: url(http://i.imgur.com/J5gfHDl.png);
position: absolute;
margin: 122px 0px;
}
.equipa_ft_tr{
transition: background-image 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 $(this).css('background-image');
})
divImagens.each(function (i) {
var imagemAusar = (i - 2) < 0 ? linkImagens.length - 2 + i : i - 2;
$(this).css('background-image', linkImagens[imagemAusar]);
});
$(this).find('.nome_equipa1').toggle();
$(this).find('.funcao_equipa1').toggle();
}, function () {
divImagens.each(function (i) {
$(this).css('background-image', linkImagens[i]);
});
$(this).find('.nome_equipa1').toggle();
$(this).find('.funcao_equipa1').toggle();
});