Exemple 25

Un montage hanté (en Té). 8 images au ratio 16/9, redimensionnées en 1152x648px dans le code.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge grey; background: linear-gradient(to bottom,#99CCCC 0%,#FFFFCC 100%);">
<p id="cd0">Survol</p>
<p id="cd1" class="cd">&nbsp;</p>
<p id="cd2" class="cd">&nbsp;</p>
<p id="cd3" class="cd">&nbsp;</p>
<p id="cd4" class="cd">&nbsp;</p>
<p id="cd5" class="cd">&nbsp;</p>
<p id="cd6" class="cd">&nbsp;</p>
<p id="cd7" class="cd">&nbsp;</p>
<p id="cd8" class="cd">&nbsp;</p>
</div>

<style><!--
#cd0{position:absolute; z-index:1;width:10vw; text-align:center; transform:translate(25vw,0.2vw); font-size:1.5vw; color:green; text-shadow:0.1vh 0.1vh black;}
.cd{position:absolute; z-index:1; width:60vw; height:33.75vw; transition:all 1s linear;}
#cd1{background:url('https://ekladata.com/UHU_nDsL8SzJhhBlBRRqAcvUbuE@1152x648.jpg'); background-size:cover;clip-path: polygon(4vw 4vw, 16vw 4vw, 16vw 8vw, 12vw 8vw,12vw 16vw, 8vw 16vw,8vw 8vw,4vw 8vw);}
#cd2{background:url('https://ekladata.com/r7X8gsyfjAu7us5-0Q9vJQ_XUhM@1152x648.jpg'); background-size:cover;clip-path: polygon(20vw 4vw, 24vw 4vw, 24vw 12vw, 28vw 12vw,28vw 16vw, 16vw 16vw,16vw 12vw,20vw 12vw);}
#cd3{background:url('https://ekladata.com/vwr-Iq4Lo452kHn1xaQltCGhnXM@1152x648.jpg'); background-size:cover;clip-path: polygon(28vw 4vw, 40vw 4vw, 40vw 8vw, 36vw 8vw,36vw 16vw, 32vw 16vw,32vw 8vw,28vw 8vw);}
#cd4{background:url('https://ekladata.com/lcDfVWztSGyCjvC6M8ypNaSjjvo@1152x648.jpg'); background-size:cover;clip-path: polygon(44vw 4vw, 48vw 4vw, 48vw 12vw, 52vw 12vw,52vw 16vw, 40vw 16vw,40vw 12vw,44vw 12vw);}
#cd5{background:url('https://ekladata.com/3R9LRZTYKina1A108X0MKMzyrHI@1152x648.jpg'); background-size:cover;clip-path: polygon(8vw 20vw, 12vw 20vw, 12vw 28vw, 16vw 28vw,16vw 32vw, 4vw 32vw,4vw 28vw,8vw 28vw);}
#cd6{background:url('https://ekladata.com/mbihMTaL6ngq2gABPDWCTswU33k@1152x648.jpg'); background-size:cover;clip-path: polygon(16vw 20vw, 28vw 20vw, 28vw 24vw, 24vw 24vw,24vw 32vw, 20vw 32vw,20vw 24vw,16vw 24vw);}
#cd7{background:url('https://ekladata.com/loLpz4nV82LcqWCCbO0_kFsMavA@1152x648.jpg'); background-size:cover;clip-path: polygon(32vw 20vw, 36vw 20vw, 36vw 28vw, 40vw 28vw,40vw 32vw, 28vw 32vw,28vw 28vw,32vw 28vw);}
#cd8{background:url('https://ekladata.com/vkDLVSBUTjTvxtTSCr2dx5G877A@1152x648.jpg'); background-size:cover;clip-path: polygon(40vw 20vw, 52vw 20vw, 52vw 24vw, 48vw 24vw,48vw 32vw, 44vw 32vw,44vw 24vw,40vw 24vw);}
#cd1:hover,#cd3:hover,#cd6:hover,#cd8:hover{z-index:5; clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 8vw, 60vw 8vw,60vw 33.75vw, 0vw 33.75vw,0vw 8vw,0vw 8vw);}
#cd2:hover,#cd4:hover,#cd5:hover,#cd7:hover{z-index:5;clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 20vw, 60vw 20vw,60vw 33.75vw, 0vw 33.75vw,0vw 20vw,0vw 20vw);}
--></style>