pour verticales

Exemple pour 10 images en 380x675px (16/9) dans un montage en 900x675px (4/3) modifiable à vos dimensions.

<div style="width:900px; height:675px; border:4px ridge grey; margin:50px 0px 50px -20px; background:lightblue;">

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

<img id="pht1" class="pht" src="https://i.goopics.net/xhxvot.jpg">

<img id="pht2" class="pht" src="https://i.goopics.net/g4yu4k.jpg">

<img id="pht3" class="pht" src="https://i.goopics.net/iybgl2.jpg">

<img id="pht4" class="pht" src="https://i.goopics.net/bfp844.jpg">

<img id="pht5" class="pht" src="https://i.goopics.net/887rxs.jpg">

<img id="pht6" class="pht" src="https://i.goopics.net/6u7lea.jpg">

<img id="pht7" class="pht" src="https://i.goopics.net/fx67sp.jpg">

<img id="pht8" class="pht" src="https://i.goopics.net/82ryb2.jpg">

<img id="pht9" class="pht" src="https://i.goopics.net/3hlltc.jpg">

<img id="pht10" class="pht" src="https://i.goopics.net/mmknbd.jpg"> 

</div>

<style><!--

#pht0{position:absolute; z-index:1; width:150px; font-size:35px;margin-top:0px; transform:translate(380px,10px);}

.pht{position:absolute;  box-sizing:border-box; width:380px; height:675px; margin-top:0px; transition:all 1s;}

#pht1{z-index:7;transform:translate(-50px, 110px) scale(0.6); border:6px ridge white;}

#pht2{z-index:7;transform:translate(570px, 110px) scale(0.6); border:6px ridge white;}

#pht3{z-index:6;transform:translate(0px, 50px) scale(0.55); border:6px ridge white;}

#pht4{z-index:6;transform:translate(520px, 50px) scale(0.55); border:6px ridge white;}

#pht5{z-index:5;transform:translate(50px, -10px) scale(0.5); border:6px ridge white;}

#pht6{z-index:5;transform:translate(470px, -10px) scale(0.5); border:6px ridge white;} 

#pht7{z-index:4;transform:translate(90px, -50px) scale(0.5); border:6px ridge white;}

#pht8{z-index:4;transform:translate(430px, -50px) scale(0.5); border:6px ridge white;}

#pht9{z-index:3;transform:translate(120px, -80px) scale(0.5); border:6px ridge white;}

#pht10{z-index:3;transform:translate(400px, -80px) scale(0.5); border:6px ridge white;}

#pht1:hover,#pht3:hover,#pht5:hover,#pht7:hover,#pht9:hover{z-index:10; transform:translate(0px,0px) scale(1);}

#pht2:hover,#pht4:hover,#pht6:hover,#pht8:hover,#pht10:hover{z-index:10; transform:translate(520px,0px) scale(1);}  

--></style>

 

SURVOL