Exemple 170

Montage en 1100px par 619px, ratio 16/9 pour 8 images au ratio 16/9.

Vous pouvez supprimer le cadre et la couleur de fond en supprimant les attributs en rouge dans la première ligne du code.

<div style="width: 1100px; height: 619px; margin: 2px auto; border: 2px solid black; background: linear-gradient(to top, #a7c7dc 0%,#85b2d3 100%);">
<p id="red0">Survol</p>
<p id="red1" class="red">&nbsp;</p>
<p id="red2" class="red">&nbsp;</p>
<p id="red3" class="red">&nbsp;</p>
<p id="red4" class="red">&nbsp;</p>
<p id="red5" class="red">&nbsp;</p>
<p id="red6" class="red">&nbsp;</p>
<p id="red7" class="red">&nbsp;</p>
<p id="red8" class="red">&nbsp;</p>
</div>

<style><!--
#red0{position:absolute; z-index:1; width:150px; font-size:40px; color:white; text-shadow:2px 2px black; transform:translate(470px,280px);}
.red{position:absolute; z-index:1; width:320px; height:180px; border:5px solid white; box-shadow:6px 6px 10px black; transition:all 1s linear;}
#red1{background:url('http://ekladata.com/N4NPnvR_1cK-ra3Bibs430kaPHQ@1100x619.jpg'); background-size:cover; transform:translate(10px,10px);}
#red2{background:url('http://ekladata.com/b05LyyGJ8rgeRrPcgRfxgb7ZqR4@1100x619.jpg'); background-size:cover; transform:translate(760px,10px);}
#red3{background:url('http://ekladata.com/S6DZBgjE13Zo9Q4pfbDCe5YoqQU@1100x619.jpg'); background-size:cover;transform:translate(10px,420px);}
#red4{background:url('http://ekladata.com/EJy8t1Bekey5lraIeWXlIEQ4nTI@1100x619.jpg'); background-size:cover; transform:translate(760px,420px);}
#red5{background:url('http://ekladata.com/5HBdWkH2qvy4-Ypq-7GbtEHqR14@1100x619.jpg'); background-size:cover; transform:translate(190px,70px) rotate(-20deg);}
#red6{background:url('http://ekladata.com/oKlBcKF2dcELtkUTIWyFbsz15oc@1100x619.jpg'); background-size:cover; transform:translate(570px,70px) rotate(20deg);}
#red7{background:url('http://ekladata.com/t0lgsVZKH-wjUltJ9GHqOMZ_aR8@1100x619.jpg'); background-size:cover; transform:translate(190px,360px) rotate(20deg);}
#red8{background:url('http://ekladata.com/be1R0PuP9BwMK4vRiIQSozEESLw@1100x619.jpg'); background-size:cover; transform:translate(570px,360px) rotate(-20deg);}
#red1:hover,#red2:hover,#red3:hover,#red4:hover,#red5:hover,#red6:hover,#red7:hover,#red8:hover{z-index:5; box-sizing:border-box; width:1100px; height:619px; box-shadow:none; transform:translate(0px,0px);}
--></style>