Position

Un autre attribut utile: le positionnement absolut et relatif et son complément, le positionnement en profondeur.

position:absolute; indique à l'élément de s'animer sans conséquence pour les autres éléments de l'article.

position:relative; indique à l'élément de s'animer en déplaçant les autres éléments; c'est le paramètre par défaut.

z-index:1; positionne chaque élément en profondeur (axe:z); plus le chiffre est élevé et plus l'élément est au premier plan.

Survolez chaque image.

<p><img id="p1" src="https://ekladata.com/EYW2pTdgBa2aT9GhjJc0ecPsdxA.jpg" alt="" /><img id="p2" src="https://ekladata.com/14amcBssOodVbgPgQm5RxJFOaK8.jpg" alt="" /></p>
<style><!--
#p1{position:relative; width:400px; float:left; transition:all 1s linear;}
#p2{position:relative; width:400px; float:left; transition:all 1s linear;}
#p1:hover{width:800px;}
--></style>

Survolez chaque image.
<p style="width: 800px; float: left;"><img id="p3" src="https://ekladata.com/EYW2pTdgBa2aT9GhjJc0ecPsdxA.jpg" alt="" /><img id="p4" src="https://ekladata.com/14amcBssOodVbgPgQm5RxJFOaK8.jpg" alt="" /></p>
<style><!--
#p3{position:absolute; z-index:1; width:400px; float:left; transition:all 1s linear; transform:translate(0px,0px);}
#p4{position:absolute; z-index:1; width:400px; float:left; transition:all 1s linear; transform:translate(400px,0px);}
#p3:hover{z-index:5;width:800px; transform:translate(0px,0px);}
#p4:hover{z-index:5;width:800px; transform:translate(0px,0px);}
--></style>

L'avantage de cet attribut est aussi son inconvénient: chaque élément étant indépendant des autres, il faut positionner chaque élément, dans la page et en profondeur (z-index;), image comme texte..

Survolez chaque image.

<p style="height: 300px;"><img id="p5" src="https://ekladata.com/POLzo1LtiLmh4ytaRbK28qQIQrE.jpg" alt="" /><img id="p6" src="https://ekladata.com/EjYp8G3IOim3tt0byrS3OUtghQw.jpg" alt="" /><img id="p7" src="https://ekladata.com/kspHD-GVX9G6clZnBj3Ba2nb4g8.jpg" alt="" /></p>
<style><!--
#p5{position:absolute; z-index:3; width:400px; float:left; transition:all 1s linear; transform:translate(100px,20px) rotate(-5deg);}
#p6{position:absolute; z-index:2; width:400px; float:left; transition:all 1s linear; transform:translate(300px,50px) rotate(15deg);}
#p7{position:absolute; z-index:1; width:400px; float:left; transition:all 1s linear; transform:translate(600px,40px) rotate(-10deg);}
#p5:hover{z-index:15; transform:translate(100px,20px) rotate(0deg);}
#p6:hover{z-index:15; transform:translate(300px,20px) rotate(0deg);}
#p7:hover{z-index:15; transform:translate(600px,20px) rotate(0deg);}
--></style>
Au départ, la première image est au dessus de la seconde, elle-même, au dessus de la troisième, chacune étant indépendante des autres (position:absolute;).

Au survol de chaque image, celle-ci passe au premier plan (z-index:15;) et se redresse.

3 remarques:

1/ la première image écrite dans le code est, par défaut, en z-index:0; la seconde en z-index:1; la troisième en z-index:2; le dernier élément écrit sera au premier plan et le premier en fond.

J'ai volontairement inversé l'ordre pour montrer l'action du z-index;

2/ Au survol, on fait remonter chaque image depuis son z-index jusqu'à un z-index:15; pour être affiché en premier plan; afin que le mouvement soit rapide, vous avez intérêt à mettre une grande différence entre les valeurs de z-index: de 1/2/3 à 15, dans l'exemple. et non de 1/2/3 à 4, qui fonctionnerait mais serait plus lent en remontée au premier plan.

3/ z-index accepte une valeur positive, nulle et/ou négative.