Exemple 22

12 images au ratio 16/9, redimensionnées dans le code en 1152x648px.

Le mouvement de chaque image oblige à placer, dessus, des boutons invisibles afin de ne pas à avoir à suivre l'image dans sa translation.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
<p id="ch1" class="ch">&nbsp;</p>
<p id="ch2" class="ch">&nbsp;</p>
<p id="ch3" class="ch">&nbsp;</p>
<p id="ch4" class="ch">&nbsp;</p>
<p id="ch5" class="ch">&nbsp;</p>
<p id="ch6" class="ch">&nbsp;</p>
<p id="ch7" class="ch">&nbsp;</p>
<p id="ch8" class="ch">&nbsp;</p>
<p id="ch9" class="ch">&nbsp;</p>
<p id="ch10" class="ch">&nbsp;</p>
<p id="ch11" class="ch">&nbsp;</p>
<p id="ch12" class="ch">&nbsp;</p>
<p id="nn1" class="nn">&nbsp;</p>
<p id="nn2" class="nn">&nbsp;</p>
<p id="nn3" class="nn">&nbsp;</p>
<p id="nn4" class="nn">&nbsp;</p>
<p id="np1" class="nn">&nbsp;</p>
<p id="np2" class="nn">&nbsp;</p>
<p id="np3" class="nn">&nbsp;</p>
<p id="np4" class="nn">&nbsp;</p>
<p id="nq1" class="nn">&nbsp;</p>
<p id="nq2" class="nn">&nbsp;</p>
<p id="nq3" class="nn">&nbsp;</p>
<p id="nq4" class="nn">&nbsp;</p>
</div>
<style><!--
.ch{position:absolute; z-index:10; width:12vw; height:6.75vw;}
#ch1{transform:translate(0vw,0vw);}
#ch2{transform:translate(16vw,0vw);}
#ch3{transform:translate(32vw,0vw);}
#ch4{transform:translate(48vw,0vw);}
#ch5{transform:translate(0vw,12vw);}
#ch6{transform:translate(16vw,12vw);}
#ch7{transform:translate(32vw,12vw);}
#ch8{transform:translate(48vw,12vw);}
#ch9{transform:translate(0vw,24vw);}
#ch10{transform:translate(16vw,24vw);}
#ch11{transform:translate(32vw,24vw);}
#ch12{transform:translate(48vw,24vw);}
.nn{position:absolute; z-index:1; width:12vw; height:6.75vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; border-radius:2vw; filter:grayscale(1);transition:transform 1s linear 0s, background 1s linear 0s, width 1s linear 0s, height 1s linear 1s, filter 1s linear 2s;}
#nn1{box-sizing:border-box; transform:translate(0vw,0vw); background:url('http://ekladata.com/LUCwj_XrjU3V8Kct0_LJoF4Mu6k@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw;}
#nn2{box-sizing:border-box; transform:translate(16vw,0vw); background:url('http://ekladata.com/6D5m1FXhZrip-nJT0kSTUA6WhA8@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-16vw 0vw;}
#nn3{box-sizing:border-box; transform:translate(32vw,0vw); background:url('http://ekladata.com/86pHVkGw7tVl2jr6GPxOTmjMsjo@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-32vw 0vw;}
#nn4{box-sizing:border-box; transform:translate(48vw,0vw); background:url('http://ekladata.com/cxiRa8zdaSmS3VI7W0_vH5_DR3I@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-48vw 0vw;}
#np1{box-sizing:border-box; transform:translate(0vw,12vw); background:url('http://ekladata.com/wW2FnCM4NecKzTR2Lvukeh_6thg@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw -12vw;}
#np2{box-sizing:border-box; transform:translate(16vw,12vw); background:url('http://ekladata.com/7mmxiiSyHitJVRN-jo8A4phuJwg@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-16vw -12vw;}
#np3{box-sizing:border-box; transform:translate(32vw,12vw); background:url('http://ekladata.com/YU4b5p5WN7uEg8VkuRH4oS0uqYE@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-32vw -12vw;}
#np4{box-sizing:border-box; transform:translate(48vw,12vw); background:url('http://ekladata.com/5wTSZPA5rHHeuPY4xJq7dz2Mf1k@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-48vw -12vw;}
#nq1{box-sizing:border-box; transform:translate(0vw,24vw); background:url('http://ekladata.com/bLVHO0oeRW78uQvA1dvzM7p1cnM@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw -24vw;}
#nq2{box-sizing:border-box; transform:translate(16vw,24vw); background:url('http://ekladata.com/ufmFzRFLiTbWSst0YcTEVIZDF70@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-16vw -24vw;}
#nq3{box-sizing:border-box; transform:translate(32vw,24vw); background:url('http://ekladata.com/6mzuy-mVRfzmrKUs0TsCrmkw0jc@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-32vw -24vw;}
#nq4{box-sizing:border-box; transform:translate(48vw,24vw); background:url('http://ekladata.com/cP3tASpNFeU8voSxll-c9P3OwNc@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-48vw -24vw;}
#ch1:hover~ #nn1,#ch2:hover~ #nn2,#ch3:hover~ #nn3,#ch4:hover~ #nn4,#ch5:hover~ #np1,#ch6:hover~ #np2,#ch7:hover~ #np3,#ch8:hover~ #np4,#ch9:hover~ #nq1,#ch10:hover~ #nq2,#ch11:hover ~ #nq3,#ch12:hover~ #nq4{z-index:5; transform:translate(0vw,0vw); width:60vw; height:33.75vw; filter:grayscale(0); background-position:0vw 0vw;}
--></style>