Exemple 12

 6 images horizontales, au ratio 16/9, redimensionnées dans le code en 60%x33.75% de la largeur de l'écran de lecture.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
<p id="sde0">Survol jusqu'&agrave; coloration</p>
<p id="sde1" class="sde">&nbsp;</p>
<p id="sde2" class="sde">&nbsp;</p>
<p id="sde3" class="sde">&nbsp;</p>
<p id="sde4" class="sde">&nbsp;</p>
<p id="sde5" class="sde">&nbsp;</p>
<p id="sde6" class="sde">&nbsp;</p>
</div>
<style><!--
#sde0{position:absolute; z-index:1; width:30vw; font-size:2vw; transform:translate(15vw,0vw);}
.sde{position:absolute; filter:grayscale(1); transition:transform 1s linear 0s,width 1s linear 0s, height 1s linear 0s,border 1s linear 0s, filter 1s linear 1s;}
#sde0{position:absolute; z-index:1; width:30vw; font-size:2vw; transform:translate(15vw,0vw);}
.sde{position:absolute; filter:grayscale(1); transition:transform 1s linear 0s,width 1s linear 0s, height 1s linear 0s,border 1s linear 0s, filter 1s linear 1s;}
#sde1{z-index:10; width:20vw; height:20vw; border-radius:50%; border:0.4vh solid white; transform:translate(2vw,12vw); background:url('https://ekladata.com/2R1e3jkDfVeIi90QSxeR1Q0_-lo@1152x648.jpg'); background-size:cover;}
#sde2{z-index:9; width:15vw; height:15vw; border-radius:50%; border:0.4vh solid white; transform:translate(15vw,10vw); background:url('https://ekladata.com/kKlZxwLiqi5LMtef3Cv-AgHHJNI@1152x648.jpg'); background-size:cover;}
#sde3{z-index:8; width:11vw; height:11vw; border-radius:50%; border:0.4vh solid white; transform:translate(24vw,9vw); background:url('https://ekladata.com/Pq3MbIpzvVyiZ4_zQzVNTGc5DUM@1152x648.jpg'); background-size:cover;}
#sde4{z-index:7; width:8vw; height:8vw; border-radius:50%; border:0.4vh solid white; transform:translate(30vw,8vw); background:url('https://ekladata.com/waQHmD0zcH3aAho_cKm0HhvD3JM@1152x648.jpg'); background-size:cover;}
#sde5{z-index:6; width:6vw; height:6vw; border-radius:50%; border:0.4vh solid white; transform:translate(34vw,7.5vw); background:url('https://ekladata.com/Q0LdUrSlhlxjJ-A9GP7pmK8zOqY@1152x648.jpg'); background-size:cover;}
#sde6{z-index:5; width:4.5vw; height:4.5vw; border-radius:50%; border:0.4vh solid white; transform:translate(37vw,7vw); background:url('https://ekladata.com/bQgYEgCxAum5eD9Cs2BqeF_amSE@1152x648.jpg'); background-size:cover;}
#sde1:hover,#sde2:hover,#sde3:hover,#sde4:hover,#sde5:hover,#sde6:hover{z-index:15; width:60vw; height:33.75vw; transform:translate(0vw,0vw); border-radius:0%; filter:grayscale(0);}
--></style>