27.01.2024

Variante du code précédent pour une image en 800x600px.

<div style="position: relative; overflow: hidden; width: 800px; height: 600px; border: 4px ridge white; box-shadow: 4px 4px 8px black; margin: 30px auto; text-align: left; background: url('http://ekladata.com/1bAdBQLLpDRS8Dz2ah_1nkyhQws.jpg'); background-size: cover;">
<p id="cde">&nbsp;</p>
<p id="inf">SURVOL</p>
<p id="mont1" class="mont">&nbsp;</p>
<p id="mont2" class="mont">&nbsp;</p>
<p id="mont3" class="mont">&nbsp;</p>
<p id="mont4" class="mont">&nbsp;</p>
<p id="mont5" class="mont">&nbsp;</p>
</div>
<style><!--
#cde{position:absolute; z-index:10; width:800px; height:600px;}
#inf{position:absolute; z-index:1; width:150px; transform:translate(100px,0px); font-size:25px;}
.mont{position:absolute; z-index:5; width:800px; height:600px; background-size:800px 600px; background:url('http://ekladata.com/wbp8CeT_GGIK8MSLvPlf4fotMuk@800x600.jpg');}
#mont1{clip-path:polygon(40% 30%, 50% 10%, 60% 30%,50% 100%); transition:all 1s 0s;}
#mont2{clip-path:polygon(20% 50%, 20% 30%, 35% 35%,50% 100%); transition:all 1s 0.5s;}
#mont3{clip-path:polygon(65% 35%, 80% 30%, 80% 50%,50% 100%); transition:all 1s 0.5s;}
#mont4{clip-path:polygon(10% 80%, 8% 66%, 18% 60%,50% 100%); transition:all 1s 1s;}
#mont5{clip-path:polygon(82% 60%, 92% 66%, 90% 80%,50% 100%); transition:all 1s 1s;}
#cde:hover ~ #mont1{clip-path:polygon(40% 0%, 60% 0%, 60% 100%,40% 100%);}
#cde:hover ~ #mont2{clip-path:polygon(20% 0%, 40% 0%, 40% 100%,20% 100%);}
#cde:hover ~ #mont3{clip-path:polygon(60% 0%, 80% 0%, 80% 100%,60% 100%);}
#cde:hover ~ #mont4{clip-path:polygon(0% 0%, 20% 0%, 20% 100%,0% 100%);}
#cde:hover ~ #mont5{clip-path:polygon(80% 0%, 100% 0%, 100% 100%,80% 100%);}
--></style>