Bis

Le titre "bis" car je crois déjà avoir proposer ce genre de montage en 1200x675px, pour 6 images horizontales en 1200x675px et 6 images verticales en 380x675px.

<div style="width:1200px; height:675px; margin:50px 0px 50px -20px; ">

<p id="sv">SURVOL</p>

<p id="mgh1" class="mgh">&nbsp;</p>

<p id="mgh2" class="mgh">&nbsp;</p>

<p id="mgh3" class="mgh">&nbsp;</p>

<p id="mgh4" class="mgh">&nbsp;</p>

<p id="mgh5" class="mgh">&nbsp;</p>

<p id="mgh6" class="mgh">&nbsp;</p>

<p id="mgv1" class="mgv">&nbsp;</p>

<p id="mgv2" class="mgv">&nbsp;</p>

<p id="mgv3" class="mgv">&nbsp;</p>

<p id="mgv4" class="mgv">&nbsp;</p>

<p id="mgv5" class="mgv">&nbsp;</p>

<p id="mgv6" class="mgv">&nbsp;</p>  

</div>

<style><!--

#sv{position:absolute; z-index:1; width:50px; height:675px; text-align:center; line-height:100px;font-size:40px;transform:translate(575px,0px);}

.mgh,.mgv{position:absolute; z-index:1; width:50px; height:675px; margin-top:0px; transition:all 1s;}

#mgh1{background:url('https://i.goopics.net/9x3ff5.jpg'); background-position:0px 0px; transform:translate(0px,0px);}

#mgh2{background:url('https://i.goopics.net/r2jiec.jpg'); background-position:-200px 0px; transform:translate(200px,0px);}

#mgh3{background:url('https://i.goopics.net/8r1h8o.jpg'); background-position:-400px 0px; transform:translate(400px,0px);}

#mgh4{background:url('https://i.goopics.net/22f7gq.jpg'); background-position:-750px 0px; transform:translate(750px,0px);}

#mgh5{background:url('https://i.goopics.net/tcnym7.jpg'); background-position:-950px 0px; transform:translate(950px,0px);}

#mgh6{background:url('https://i.goopics.net/n1rk4o.jpg'); background-position:-1150px 0px; transform:translate(1150px,0px);}

#mgh1:hover,#mgh2:hover,#mgh3:hover,#mgh4:hover,#mgh5:hover,#mgh6:hover{z-index:5; width:1200px; background-position:0px 0px; transform:translate(0px,0px);}

#mgv1{background:url('https://i.goopics.net/fmuhxi.jpg'); background-position:0px 0px; transform:translate(100px,0px);}

#mgv2{background:url('https://i.goopics.net/ysjxx4.jpg'); background-position:0px 0px; transform:translate(300px,0px);}

#mgv3{background:url('https://i.goopics.net/ne4uwd.jpg'); background-position:0px 0px; transform:translate(500px,0px);}

#mgv4{background:url('https://i.goopics.net/erth63.jpg'); background-position:-280px 0px; transform:translate(650px,0px);}

#mgv5{background:url('https://i.goopics.net/6pjcwc.jpg'); background-position:-280px 0px; transform:translate(850px,0px);}

#mgv6{background:url('https://i.goopics.net/m01kn4.jpg'); background-position:-280px 0px; transform:translate(1050px,0px);}

#mgv1:hover{z-index:5; width:380px; background-position:0px 0px; transform:translate(100px,0px);}

#mgv2:hover{z-index:5; width:380px; background-position:0px 0px; transform:translate(300px,0px);}

#mgv3:hover{z-index:5; width:380px; background-position:0px 0px; transform:translate(500px,0px);}

#mgv4:hover{z-index:5; width:380px; background-position:0px 0px; transform:translate(320px,0px);}

#mgv5:hover{z-index:5; width:380px; background-position:0px 0px; transform:translate(550px,0px);}

#mgv6:hover{z-index:5; width:380px; background-position:0px 0px; transform:translate(780px,0px);}

--></style>

SURVOL