12.04.2024

 Montage en 800x600px, pour 5 images; le code, aux dimensions modulables, s'adapte au format de vos images.

J'ai laissé volontairement le code un peu long pour qu'il reste compréhensible mais vous n'avez que 5 adresses à modifier et éventuellement la taille du montage.

<div style="width: 800px; height: 600px; margin: 50px auto; text-align: left;">
<p id="inf">SURVOL</p>
<p id="cgh1" class="zera">&nbsp;</p>
<p id="ggh1" class="zera">&nbsp;</p>
<p id="dgh1" class="zera">&nbsp;</p>
<p id="cdh1" class="zerb">&nbsp;</p>
<p id="gdh1" class="zerb">&nbsp;</p>
<p id="ddh1" class="zerb">&nbsp;</p>
<p id="cdb1" class="zerc">&nbsp;</p>
<p id="gdb1" class="zerc">&nbsp;</p>
<p id="ddb1" class="zerc">&nbsp;</p>
<p id="cgb1" class="zerd">&nbsp;</p>
<p id="ggb1" class="zerd">&nbsp;</p>
<p id="dgb1" class="zerd">&nbsp;</p>
<p id="cc1" class="zere">&nbsp;</p>
<p id="cg1" class="zere">&nbsp;</p>
<p id="cd1" class="zere">&nbsp;</p>
</div>
<style><!--
#inf{position:absolute; width:120px; font-size:25px; transform:translate(340px,80px);}
.zera{position:absolute; width:800px; height:600px; background:url('http://ekladata.com/PS7pR9c1EjyQgc_C_niblMh-_0I.jpg'); background-size:cover; filter:grayscale(1); opacity:0.3; transition:all 1.5s 0s, filter 1s 0.5s, opacity 1s 0.5s;}
.zerb{position:absolute; width:800px; height:600px; background:url('http://ekladata.com/r3zNZABXc4PGnNrcgebp4468pxc.jpg'); background-size:cover; filter:grayscale(1); opacity:0.3; transition:all 1.5s 0s, filter 1s 0.5s, opacity 1s 0.5s;}
.zerc{position:absolute; width:800px; height:600px; background:url('http://ekladata.com/srlU_Y4ZDBfF_exRdJ9PcMVKiCU.jpg'); background-size:cover; filter:grayscale(1); opacity:0.3; transition:all 1.5s 0s, filter 1s 0.5s, opacity 1s 0.5s;}
.zerd{position:absolute; width:800px; height:600px; background:url('http://ekladata.com/16nikv99S9ws2aiXZhUQsw0JpPw.jpg'); background-size:cover; filter:grayscale(1); opacity:0.3; transition:all 1.5s 0s, filter 1s 0.5s, opacity 1s 0.5s;}
.zere{position:absolute; width:800px; height:600px; background:url('http://ekladata.com/VC-vEoHC5FwAxsD-ZtyadNOCql0.jpg'); background-size:cover; filter:grayscale(1); opacity:0.3; transition:all 1.5s 0s, filter 1s 0.5s, opacity 1s 0.5s;}
#cgh1{clip-path:polygon(35% 0%,45% 0%, 45% 0%,35% 25%); filter:grayscale(0); opacity:1;}
#ggh1{clip-path:polygon(0% 0%,10% 0%, 10% 0%,0% 25%);}
#dgh1{clip-path:polygon(70% 0%,80% 0%, 80% 0%,70% 25%);}
#cgh1:hover{z-index:5; clip-path:polygon(30% 0%,70% 0%, 70% 100%,30% 100%);}
#cgh1:hover ~ #ggh1{z-index:5; clip-path:polygon(0% 0%,30% 0%, 30% 100%,0% 100%);filter:grayscale(0); opacity:1;}
#cgh1:hover ~ #dgh1{z-index:5; clip-path:polygon(70% 0%,100% 0%, 100% 100%,70% 100%);filter:grayscale(0); opacity:1;}
#cdh1{clip-path:polygon(55% 0%,65% 0%, 65% 18%,65% 25%); filter:grayscale(0); opacity:1;}
#gdh1{clip-path:polygon(20% 0%,30% 0%, 30% 18%,30% 25%);}
#ddh1{clip-path:polygon(90% 0%,100% 0%, 100% 18%,100% 25%);}
#cdh1:hover{z-index:5; clip-path:polygon(30% 0%,70% 0%, 70% 100%,30% 100%);}
#cdh1:hover ~ #gdh1{z-index:5; clip-path:polygon(0% 0%,30% 0%, 30% 100%,0% 100%);filter:grayscale(0); opacity:1;}
#cdh1:hover ~ #ddh1{z-index:5; clip-path:polygon(70% 0%,100% 0%, 100% 100%,70% 100%);filter:grayscale(0); opacity:1;}
#cdb1{clip-path:polygon(65% 75%,65% 75%, 65% 100%,55% 100%); filter:grayscale(0); opacity:1;}
#gdb1{clip-path:polygon(30% 75%,30% 75%, 30% 100%,20% 100%);}
#ddb1{clip-path:polygon(100% 75%,100% 75%, 100% 100%,90% 100%);}
#cdb1:hover{z-index:5; clip-path:polygon(30% 0%,70% 0%, 70% 100%,30% 100%);}
#cdb1:hover ~ #gdb1{z-index:5; clip-path:polygon(0% 0%,30% 0%, 30% 100%,0% 100%);filter:grayscale(0); opacity:1;}
#cdb1:hover ~ #ddb1{z-index:5; clip-path:polygon(70% 0%,100% 0%, 100% 100%,70% 100%);filter:grayscale(0); opacity:1;}
#cgb1{clip-path:polygon(35% 75%,35% 75%, 45% 100%,35% 100%); filter:grayscale(0); opacity:1;}
#ggb1{clip-path:polygon(0% 75%,0% 75%, 10% 100%,0% 100%);}
#dgb1{clip-path:polygon(70% 75%,70% 75%, 80% 100%,70% 100%);}
#cgb1:hover{z-index:5; clip-path:polygon(30% 0%,70% 0%, 70% 100%,30% 100%);}
#cgb1:hover ~ #ggb1{z-index:5; clip-path:polygon(0% 0%,30% 0%, 30% 100%,0% 100%);filter:grayscale(0); opacity:1;}
#cgb1:hover ~ #dgb1{z-index:5; clip-path:polygon(70% 0%,100% 0%, 100% 100%,70% 100%);filter:grayscale(0); opacity:1;}
#cc1{clip-path:polygon(50% 20%,60% 50%, 50% 80%,40% 50%); filter:grayscale(0); opacity:1;}
#cg1{clip-path:polygon(15% 20%,25% 50%, 15% 80%,5% 50%);}
#cd1{clip-path:polygon(85% 20%,95% 50%, 85% 80%,75% 50%);}
#cc1:hover{z-index:5; clip-path:polygon(30% 0%,70% 0%, 70% 100%,30% 100%);}
#cc1:hover ~ #cg1{z-index:5; clip-path:polygon(0% 0%,30% 0%, 30% 100%,0% 100%);filter:grayscale(0); opacity:1;}
#cc1:hover ~ #cd1{z-index:5; clip-path:polygon(70% 0%,100% 0%, 100% 100%,70% 100%);filter:grayscale(0); opacity:1;}
--></style>