28.04.2024

6 images au ratio 16/9 pour mon exemple dans un montage en 1000px par 563px. 

<div style="width: 1000px; height: 563px; margin: 50px auto; text-align: left; border: 6px ridge cyan; box-shadow: 4px 4px 8px black; background: url('http://ekladata.com/JkyBVE7Pl6QoUAqGQ2urWHhcXkU.jpg'); background-size: cover;">
<p id="bs0">&nbsp;</p>
<hr id="bs1" /><hr id="bs2" /><hr id="bs3" /><hr id="bs4" />
<p id="sv">Survol carte de vacances.</p>
<p id="hauth" class="env">&nbsp;</p>
<p id="hautb" class="env">&nbsp;</p>
<p id="droit" class="env">&nbsp;</p>
<p id="bas" class="env">&nbsp;</p>
<p id="gauche" class="env">&nbsp;</p>
</div>
<style><!--
#bs0{position:absolute; width:600px; height:338px; border:4px solid black; transform:translate(200px,200px);}
#bs1{position:absolute; width:690px; transform:translate(158px,350px) rotate(29.5deg); border:2px solid black;}
#bs2{position:absolute; width:690px; transform:translate(158px,350px) rotate(-29.5deg); border:2px solid black;}
#bs3{position:absolute; width:345px; transform:translate(180px,93px) rotate(-30deg); border:2px solid black;}
#bs4{position:absolute; width:345px; transform:translate(480px,93px) rotate(30deg); border:2px solid black;}
#sv{position:absolute; width:1000px; width:400px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(600px,20px);}
.env{position:absolute; width:1000px; height:563px; transition:all 1s;}
#hauth{ background:url('http://ekladata.com/Lvh_nztxOv2ioJ5Q7mzs04N8Igs.jpg'); background-size:cover;clip-path:polygon(50.5% 5.5%, 50.5% 5.5%, 80% 35.5%,20.5% 35.5%);}
#hautb{background:url('http://ekladata.com/4L9LaSl7FUGBWDUnAptgq4_ve24.jpg'); background-size:cover;clip-path:polygon(21% 36%, 80% 36%, 50.5% 65.5%,50.5% 65.5%);}
#droit{background:url('http://ekladata.com/Zk_igWyTIQ04O20-xxRQwNm19mw.jpg'); background-size:cover;clip-path:polygon(51.5% 66.2%, 80.3% 36.5%, 80.4% 95.6%,51.5% 66.2%);}
#bas{background:url('http://ekladata.com/qgswzInQQs9_ivxeFcqPs9h8UHE.jpg'); background-size:cover;clip-path:polygon(51% 66.2%, 51% 66.2%, 80.4% 96%,20.5% 96%);}
#gauche{background:url('http://ekladata.com/6FNAQwCcBYpkfUM1sd4WkY_yt3E.jpg'); background-size:cover;clip-path:polygon(20.5% 36%, 50.5% 66.2%, 50.5% 66.2%,20.4% 96%);}
#hauth:hover, #hautb:hover, #droit:hover, #bas:hover, #gauche:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>