6 images au ratio 16/9 dans un montage en 1200px par 675px + bordure de 8 px.
<div style="width:1200px; height:675px; margin:50px 0 0 -20px;">
<p id="prt0">SURVOL</p>
<img id="prt1" class="prt" src="https://i.goopics.net/v6wju7.jpg">
<img id="prt2" class="prt" src="https://i.goopics.net/tq2esj.jpg">
<img id="prt3" class="prt" src="https://i.goopics.net/hgxklk.jpg">
<img id="prt4" class="prt" src="https://i.goopics.net/qf13p1.jpg">
<img id="prt5" class="prt" src="https://i.goopics.net/k9ywe2.jpg">
<img id="prt6" class="prt" src="https://i.goopics.net/2bdhwv.jpg">
</div>
<style><!--
#prt0{position:absolute; z-index:1; width:40px; height:675px; font-size:40px; transform:translate(580px,0px);}
.prt{position:absolute; z-index:1; width:480px; height:270px; border:8px ridge white; transition:all 1s;}
#prt1{transform:translate(50px,100px) rotate(-20deg);}
#prt2{transform:translate(50px,200px) rotate(-20deg);}
#prt3{transform:translate(50px,300px) rotate(-20deg);}
#prt4{transform:translate(670px,100px) rotate(20deg);}
#prt5{transform:translate(670px,200px) rotate(20deg);}
#prt6{transform:translate(670px,300px) rotate(20deg);}
#prt1:hover,#prt2:hover,#prt3:hover,#prt4:hover,#prt5:hover,#prt6:hover{z-index:5; width:1200px; height:675px; transform:translate(0px,0px) rotate(0deg);}
--></style>
SURVOL
