05a.02.2024

Même principe en croix de Malte.

<div style="width: 800px; height: 600px; margin: 50px auto;">
<p id="sv">SURVOL</p>
<p id="q1" class="qt">&nbsp;</p>
<p id="q2" class="qt">&nbsp;</p>
<p id="q3" class="qt">&nbsp;</p>
<p id="q4" class="qt">&nbsp;</p>
</div>

<style><!--
#sv{position:absolute; z-index:1; width:140px; font-size:30px; color:white; text-shadow:2px 2px black;}
.qt{position:absolute; z-index:1; width:800px; height:600px; filter:grayscale(1); transition:all 1s;}
#q1{ background:url('http://ekladata.com/bam54fIr5WpxKXaL4vMIV2LAtzU.jpg'); background-size:800px 600px; clip-path:polygon(0% 25%, 50% 50%, 50% 50%,0% 75%, 15% 50%);}
#q2{background:url('http://ekladata.com/W7sol3JyvXdwvObov_1VIrtZN9c.jpg'); background-size:800px 600px; clip-path:polygon(50% 50%, 100% 25%, 85% 50%, 100% 75%,50% 50%); }
#q3{background:url('http://ekladata.com/MT8pWEnRHS-j7oXVk1R-afzT5mw.jpg'); background-size:800px 600px; clip-path:polygon(25% 0%, 50% 20%, 75% 0%, 50% 50%,50% 50%);}
#q4{background:url('http://ekladata.com/j-8KSQ8QDK5TuvOjJh1_vPG33OA.jpg'); background-size:800px 600px; clip-path:polygon(50% 50%, 50% 50%, 75% 100%,50% 80%, 25% 100%);}
#q1:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%); filter:grayscale(0);}
#q2:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%); filter:grayscale(0);}
#q3:hover{z-index:5; clip-path:polygon(0% 0%, 50% 0%,100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
#q4:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%,50% 100%, 0% 100%); filter:grayscale(0);}
--></style>