How to animate the layout of Divs and caption, when doing Hover in one of these elements?

Question

I’m creating a website, I’ve been asked to play a prank on the team. According to this image, when :Hover in one of the parts, all the text and image are ordered:

I don’t know how to take this boot off, because javascript is not my strong suit. I wish you could help me.

Cropped photo

My HTML is:

<div class="equipa_membro">
  <div class="equipa_foto equipa_foto1">
    <div class="equipa_ft_tr equipa_ft2_tr1"></div>
    <div class="equipa_ft_tr equipa_ft2_tr2"></div>
    <div class="equipa_ft_tr equipa_ft2_tr3"></div>
    <div class="equipa_ft_tr equipa_ft2_tr4"></div>
    <div class="equipa_ft_tr equipa_ft2_tr5"></div>
    <div class="equipa_ft_tr equipa_ft2_tr6"></div>
  </div>
  <h5 class="nome_equipa1">oNem od bmoerM</h6>
  <p class="funcao_equipa2">ãnuonçF edsepDamehane</p>
</div>

My 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(images/foto1.png); position: absolute; margin: 0px 0px; }
.equipa_ft1_tr2 {background: url(images/foto2.png); position: absolute; margin: 0px 70px; z-index: 1000;}
.equipa_ft1_tr3 {background: url(images/foto3.png); position: absolute; margin: 0px 141px;}
.equipa_ft1_tr4 {background: url(images/foto4.png); position: absolute; margin: 122px 0px;}
.equipa_ft1_tr5 {background: url(images/foto5.png); position: absolute; margin: 122px 70px; z-index: 1000;}
.equipa_ft1_tr6 {background: url(images/foto6.png); position: absolute; margin: 122px 141px;}

Answer 1

Put the following in HTML. O max-width it 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. Don’t 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");
    })
})

Answer 2

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 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 suggestions that I present above I ordered the images to make javascript simpler. So the images are :

1 2 3
4 5 6

In addition to this change, I also use this HTML code 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>