01.06.2024

 Montage en 1200x675px (16/9) avec 6 images; on peut modifier les dimensions en reprenant les valeurs de taille et de positionnement.

 Désolé pour le nombre de lignes de code mais 6 images divisées chacune en 3 parties + un bouton d'animation, cela fait déjà 24 lignes !

Cependant, vous n'avez que les 6 adresses de mes images à modifier.

On peut placer ce montage dans un cadre avec bordure même je le présente ici en transparent.

On peut aussi imaginer placer des images verticales ou mélangées mais il faut revoir les paramètres du code.

<div style="width: 1200px; height: 675px; margin: 50px auto;">
<p id="sv">SURVOL</p>
<p id="bt1">&nbsp;</p>
<p id="pg1" class="mg1">&nbsp;</p>
<p id="pc1" class="mg1">&nbsp;</p>
<p id="pd1" class="mg1">&nbsp;</p>
<p id="bt2">&nbsp;</p>
<p id="pg2" class="mg2">&nbsp;</p>
<p id="pc2" class="mg2">&nbsp;</p>
<p id="pd2" class="mg2">&nbsp;</p>
<p id="bt3">&nbsp;</p>
<p id="pg3" class="mg3">&nbsp;</p>
<p id="pc3" class="mg3">&nbsp;</p>
<p id="pd3" class="mg3">&nbsp;</p>
<p id="bt4">&nbsp;</p>
<p id="pg4" class="mg4">&nbsp;</p>
<p id="pc4" class="mg4">&nbsp;</p>
<p id="pd4" class="mg4">&nbsp;</p>
<p id="bt5">&nbsp;</p>
<p id="pg5" class="mg5">&nbsp;</p>
<p id="pc5" class="mg5">&nbsp;</p>
<p id="pd5" class="mg5">&nbsp;</p>
<p id="bt6">&nbsp;</p>
<p id="pg6" class="mg6">&nbsp;</p>
<p id="pc6" class="mg6">&nbsp;</p>
<p id="pd6" class="mg6">&nbsp;</p>
</div>
<style><!--
#sv{position:absolute; z-index:1; width:150px; font-size:25px; transform:translate(525px,10px);}
#bt1{position:absolute; z-index:10; width:360px; height:250px; transform:translate(10px,60px);}
.mg1{position:absolute; z-index:1; width:1200px; height:675px; filter:grayscale(1); background:url('http://ekladata.com/j3uUCilgC_9Z8qJpDCk598gZKpw.jpg'); background-size:1200px 675px; transition:all 1s;}
#pg1{box-sizing:border-box; width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:0px 0px; transform:translate(-100px,-150px) scale(0.25) skewy(25deg);}
#pc1{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:-400px 0px; transform:translate(0px,-150px) scale(0.25) skewy(-25deg);}
#pd1{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:6px 6px 15px black; background-position:-800px 0px; transform:translate(100px,-150px) scale(0.25) skewy(25deg);}
#bt2{position:absolute; z-index:10; width:360px; height:250px; transform:translate(410px,60px);}
.mg2{position:absolute; z-index:1; width:1200px; height:675px; filter:grayscale(1); background:url('http://ekladata.com/rp9xuBO1xN9wTWRel8Kkdd5ewSE.jpg'); background-size:1200px 675px; transition:all 1s;}
#pg2{box-sizing:border-box; width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:0px 0px; transform:translate(300px,-150px) scale(0.25) skewy(25deg);}
#pc2{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:-400px 0px; transform:translate(400px,-150px) scale(0.25) skewy(-25deg);}
#pd2{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:6px 6px 15px black; background-position:-800px 0px; transform:translate(500px,-150px) scale(0.25) skewy(25deg);}
#bt3{position:absolute; z-index:10; width:360px; height:250px; transform:translate(810px,60px);}
.mg3{position:absolute; z-index:1; width:1200px; height:675px; filter:grayscale(1); background:url('http://ekladata.com/95jJcYQfv5aqTk_LCXuhS38bIQU.jpg'); background-size:1200px 675px; transition:all 1s;}
#pg3{box-sizing:border-box; width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:0px 0px; transform:translate(700px,-150px) scale(0.25) skewy(25deg);}
#pc3{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:-400px 0px; transform:translate(800px,-150px) scale(0.25) skewy(-25deg);}
#pd3{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:6px 6px 15px black; background-position:-800px 0px; transform:translate(900px,-150px) scale(0.25) skewy(25deg);}
#bt4{position:absolute; z-index:10; width:360px; height:250px; transform:translate(10px,350px);}
.mg4{position:absolute; z-index:1; width:1200px; height:675px; filter:grayscale(1); background:url('http://ekladata.com/QKYafBI8an8I4OrjpHwIV4JPFUU.jpg'); background-size:1200px 675px; transition:all 1s;}
#pg4{box-sizing:border-box; width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:0px 0px; transform:translate(-100px,140px) scale(0.25) skewy(25deg);}
#pc4{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:-400px 0px; transform:translate(0px,140px) scale(0.25) skewy(-25deg);}
#pd4{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:6px 6px 15px black; background-position:-800px 0px; transform:translate(100px,140px) scale(0.25) skewy(25deg);}
#bt5{position:absolute; z-index:10; width:360px; height:250px; transform:translate(410px,350px);}
.mg5{position:absolute; z-index:1; width:1200px; height:675px; filter:grayscale(1); background:url('http://ekladata.com/ed_N_SMbXEgk5Z2QEg1Dk6Syam0.jpg'); background-size:1200px 675px; transition:all 1s;}
#pg5{box-sizing:border-box; width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:0px 0px; transform:translate(300px,140px) scale(0.25) skewy(25deg);}
#pc5{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:-400px 0px; transform:translate(400px,140px) scale(0.25) skewy(-25deg);}
#pd5{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:6px 6px 15px black; background-position:-800px 0px; transform:translate(500px,140px) scale(0.25) skewy(25deg);}
#bt6{position:absolute; z-index:10; width:360px; height:250px; transform:translate(810px,350px);}
.mg6{position:absolute; z-index:1; width:1200px; height:675px; filter:grayscale(1); background:url('http://ekladata.com/r0qUiUt3IbXy8ILe0D6zcWcQ4AE.jpg'); background-size:1200px 675px; transition:all 1s;}
#pg6{box-sizing:border-box; width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:0px 0px; transform:translate(700px,140px) scale(0.25) skewy(25deg);}
#pc6{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:0px 6px 15px black; background-position:-400px 0px; transform:translate(800px,140px) scale(0.25) skewy(-25deg);}
#pd6{box-sizing:border-box;width:400px; height:675px; border:10px solid white; box-shadow:6px 6px 15px black; background-position:-800px 0px; transform:translate(900px,140px) scale(0.25) skewy(25deg);}

#bt1:hover ~ #pg1,#bt2:hover ~ #pg2,#bt3:hover ~ #pg3,#bt4:hover ~ #pg4,#bt5:hover ~ #pg5,#bt6:hover ~ #pg6{z-index:5; border:none; box-shadow:none; filter:grayscale(0); transform:translate(0px,0px) skew(0deg) scale(1);}
#bt1:hover ~ #pc1,#bt2:hover ~ #pc2,#bt3:hover ~ #pc3,#bt4:hover ~ #pc4,#bt5:hover ~ #pc5,#bt6:hover ~ #pc6{z-index:5; border:none; box-shadow:none; filter:grayscale(0); transform:translate(400px,0px) skew(0deg) scale(1);}
#bt1:hover ~ #pd1,#bt2:hover ~ #pd2,#bt3:hover ~ #pd3,#bt4:hover ~ #pd4,#bt5:hover ~ #pd5,#bt6:hover ~ #pd6{z-index:5; border:none; box-shadow:none; filter:grayscale(0); transform:translate(800px,0px) skew(0deg) scale(1);}
--></style>