Mont.25.3.23

 Code simple pour 6 images au ratio 16/9.

SURVOL

<div style="width: 1000px; height: 563px; border: 4px solid grey; margin: 30px auto; text-align: left; background: url('http://ekladata.com/FSy4tDAzom-Ix22uALO9392uS1U/img692.jpg');">
<p id="sol0">SURVOL</p>
<img id="sol1" class="sol" src="http://ekladata.com/kyk9ZTO0ZmDarzmeWQDo8fTAqYU.jpg" alt="" /> <img id="sol2" class="sol" src="http://ekladata.com/EDMNE2fSBDwGMp1NpbuuUadi2SI.jpg" alt="" /> <img id="sol3" class="sol" src="http://ekladata.com/v9N8IzsoztqEFvuMbsrd0-TIcVA.jpg" alt="" /> <img id="sol4" class="sol" src="http://ekladata.com/RZeXc173WBv3whkqQcgnZ2SiM7I.jpg" alt="" /> <img id="sol5" class="sol" src="http://ekladata.com/xMw-_MB_G9ZAJjW6BB7QTviY2zU.jpg" alt="" /> <img id="sol6" class="sol" src="http://ekladata.com/ZCVDERUZCtluYBWA-fkFB0JImxI.jpg" alt="" /></div>
<style><!--
#sol0{position:absolute; z-index:1; width:150px; text-align:center; font-size:30px; color:white; text-shadow:2px 2px green; transform:translate(425px,20px);}
.sol{position:absolute; z-index:1; width:320px; height:180px; border:4px solid white; box-shadow:4px 4px 6px black; filter:hue-rotate(90deg); transition:all 1s, filter 0.5s 1s;}
#sol1{box-sizing:border-box; transform:translate(100px,80px) rotate(20deg);}
#sol2{box-sizing:border-box; transform:translate(100px,180px) rotate(0deg);}
#sol3{box-sizing:border-box; transform:translate(100px,280px) rotate(-20deg);}
#sol4{box-sizing:border-box; transform:translate(550px,80px) rotate(-20deg);}
#sol5{box-sizing:border-box; transform:translate(550px,180px) rotate(0deg);}
#sol6{box-sizing:border-box; transform:translate(550px,280px) rotate(20deg);}
#sol1:hover,#sol2:hover,#sol3:hover,#sol4:hover,#sol5:hover,#sol6:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px); filter:hue-rotate(0deg);}
--></style>