12.02.2024

Encore une variante avec 4 images pour un montage en 800x600px.

<div style="width: 800px; height: 600px; margin: 50px auto; text-align: left;">
<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>
</div>

<style><!--
#cd0{position:absolute; z-index:1; width:150px; font-size:25px; color:pink; text-shadow:2px 2px black; transform:translate(650px,10px);}
.cd{position:absolute; width:800px; height:600px; border:4px ridge white; box-shadow:4px 4px 8px black; transition:all 1s;}
#cd1{box-sizing:border-box; background:url('http://ekladata.com/Zk_igWyTIQ04O20-xxRQwNm19mw.jpg'); background-size:800px 600px; clip-path:polygon(85% 40%, 100% 50%, 100% 50%,85% 60%);}
#cd2{box-sizing:border-box; background:url('http://ekladata.com/e-EHx4sER2AKZjEc8ZqDr76pf6Y.jpg'); background-size:800px 600px; clip-path:polygon(65% 30%, 90% 50%, 90% 50%,65% 70%);}
#cd3{box-sizing:border-box; background:url('http://ekladata.com/Lt4aHhp-sN7fEQ-JYfJqnhrEdsM.jpg'); background-size:800px 600px; clip-path:polygon(35% 15%, 75% 50%, 75% 50%,35% 85%);}
#cd4{box-sizing:border-box; background:url('http://ekladata.com/DcvQ7BG1ErQF5dpJ98tdoMupsjQ.jpg'); background-size:800px 600px; clip-path:polygon(0% 0%, 50% 50%, 50% 50%,0% 100%);}
#cd1:hover,#cd2:hover,#cd3:hover,#cd4:hover{z-index:5; clip-path:polygon(0% 0%,105% 0%, 105% 105%, 0% 105%);}
--></style>