Exemple 33

8 images au ratio 16/9, redimensionnées par le code en 1152x648px; celles du code sont différentes de celle de l'exemple mais le principe est le même.

Clic sur chaque bouton puis survol de l'image noir et blanc affichée.

<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left;"><input id="ex1" class="ex" type="text" value="G" /> <input id="ex2" class="ex" type="text" value="H" /> <input id="ex3" class="ex" type="text" value="D" /> <input id="ex4" class="ex" type="text" value="B" /> <input id="ex5" class="ex" type="text" value="C" />
<p id="cde1" class="cde">&nbsp;</p>
<p id="cde2" class="cde">&nbsp;</p>
<p id="cde3" class="cde">&nbsp;</p>
<p id="cde4" class="cde">&nbsp;</p>
<p id="cde5" class="cde">&nbsp;</p>
<p id="nb1" class="nb">&nbsp;</p>
<p id="coul1" class="coul">&nbsp;</p>
<p id="coul2" class="coul">&nbsp;</p>
<p id="coul3" class="coul">&nbsp;</p>
<p id="coul4" class="coul">&nbsp;</p>
<p id="coul5" class="coul">&nbsp;</p>
</div>
<style><!--
.ex{position:absolute; z-index:5; width:2vw; height:2vw; border-radius:50%; box-shadow:inset -0.3vh -0.3vh 0.5vh white, inset 0.3vh 0.3vh 0.5vh black; font-size:1.5vw; line-height:2vw; text-align:center;}
#ex1{transform:translate(15vw,0.5vw);}
#ex2{transform:translate(20vw,0.5vw);}
#ex3{transform:translate(25vw,0.5vw);}
#ex4{transform:translate(30vw,0.5vw);}
#ex5{transform:translate(35vw,0.5vw);}
.cde{position:absolute; z-index:1; width:60vw; height:33.75vw; }

.nb{position:absolute; z-index:2; width:60vw; height:33.75vw; background-size:cover; filter:grayscale(1);}
#nb1{background:url('http://ekladata.com/U5Vp9pF0w4ZYu6iGQrkJK88ObqY@1152x648.jpg');}

.coul{position:absolute; z-index:3; background-size:60vw 33.75vw; transition:all 2s linear;}
#coul1{width:0vw; height:33.75vw; background:url('http://ekladata.com/U5Vp9pF0w4ZYu6iGQrkJK88ObqY@1152x648.jpg');}
#coul2{width:60vw; height:0vw; background:url('http://ekladata.com/xfcMlCGhYclsGqxqAjo4hx_KImU@1152x648.jpg');}
#coul3{width:0vw; height:33.75vw; background:url('http://ekladata.com/2mvGe95O-co9jMjj7dgwPBZfXrg@1152x648.jpg'); background-position:-60vw 0vw; transform:translate(60vw,0vw); }
#coul4{width:60vw; height:0vw; background:url('http://ekladata.com/1oKzhJ4fPnfrZSJ7HWxviuR8wWo@1152x648.jpg'); background-position:0vw -33.75vw; transform:translate(0vw,33.75vw);}
#coul5{width:0vw; height:0vw; border-radius:50%; background:url('http://ekladata.com/NLwzPeSP0bx5Mu-s3waCEYT73Hg@1152x648.jpg'); background-position:-30vw -16.75vw; transform:translate(30vw,16.75vw);}

#ex1:focus ~ #cde1,#ex2:focus ~ #cde2,#ex3:focus ~ #cde3,#ex4:focus ~ #cde4,#ex5:focus ~ #cde5{z-index:4;}

#cde1:hover ~ #coul1{width:60vw;}
#cde2:hover ~ #coul2{height:33.75vw;}
#cde3:hover ~ #coul3{width:60vw;background-position:0vw 0vw; transform:translate(0vw,0vw);}
#cde4:hover ~ #coul4{height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
#cde5:hover ~ #coul5{width:60vw; height:33.75vw; border-radius:0%; background-position:0vw 0vw; transform:translate(0vw,0vw);}

#ex2:focus ~ #nb1{background:url('http://ekladata.com/xfcMlCGhYclsGqxqAjo4hx_KImU@1152x648.jpg');}
#ex3:focus ~ #nb1{background:url('http://ekladata.com/2mvGe95O-co9jMjj7dgwPBZfXrg@1152x648.jpg');}
#ex4:focus ~ #nb1{background:url('http://ekladata.com/1oKzhJ4fPnfrZSJ7HWxviuR8wWo@1152x648.jpg');}
#ex5:focus ~ #nb1{background:url('http://ekladata.com/NLwzPeSP0bx5Mu-s3waCEYT73Hg@1152x648.jpg');}
--></style>

Chaque clic sur un bouton, (positionnés en premier plan:z-index:5) affiche l'image #nb1 avec une adresse image différente.

Chaque clic sur un bouton fait monter en second plan (z-index:4); les boutons invisibles (#cde1 à #cde5).

Le survol de chaque bouton invisible anime les images couleur (#coul1 à #coul5) positionnées en troisième plan:z-index:3;.

Les animations sont apparition de la gauche (G), du haut (H), de la droite (D), du bas (B) et du centre (C).