05.02.2024

Après avoir réalisé que le code du 04.02 pouvait s'écrire d'une autre façon et n'exploitait pas les possibilités de cette écriture, en voilà une autre...

<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; border-radius:50%; filter:grayscale(1); transition:all 1s;}
#q1{ background:url('http://ekladata.com/bam54fIr5WpxKXaL4vMIV2LAtzU.jpg'); background-size:800px 600px; clip-path:polygon(0% 20%, 50% 50%, 50% 50%,0% 80%);}
#q2{background:url('http://ekladata.com/W7sol3JyvXdwvObov_1VIrtZN9c.jpg'); background-size:800px 600px; clip-path:polygon(50% 50%, 100% 20%, 100% 80%,50% 50%); }
#q3{background:url('http://ekladata.com/MT8pWEnRHS-j7oXVk1R-afzT5mw.jpg'); background-size:800px 600px; clip-path:polygon(25% 0%, 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%,25% 100%);}
#q1:hover, #q2:hover,#q3:hover, #q4:hover{z-index:5;width:800px; height:600px; border-radius:0%; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:grayscale(0);}
--></style>