ArtC.3.4.21

Un code simple à 3 images à survoler; l'avantage de ce type de code en % est que vous pouvez modifier les dimensions du montage et des images pour qu'il fonctionne selon vos choix.

Survol

<div style="width: 80vw; height: 45vw; margin: 1vh auto; text-align: left;"><p id="nt0">Survol</p><img id="nt1" class="nt" src="http://ekladata.com/vhmHMKQA1wNeoYy3HIsQ49xXB6w.jpg" alt="" /> <img id="nt2" class="nt" src="http://ekladata.com/so5_v8X4udK6tvUKW5GfIuHSsAE.jpg" alt="" /> <img id="nt3" class="nt" src="http://ekladata.com/8Owbb3-9KVHUkiNYoV4UWTDaymE.jpg" alt="" /></div>
<style><!--
#nt0{position:absolute; z-index:2; width:10vw; font-size:1.5vw; color:white; text-shadow:1px 1px black;}
.nt{position:absolute; z-index:1; width:80vw; height:45vw; filter:grayscale(1); transition:all 1s linear 0s, filter 1s linear 1s;}
#nt1{clip-path:polygon(0% 0%, 70% 0%, 70% 0%,0% 90%);}
#nt2{clip-path:polygon(77% 0%, 100% 0%, 100% 100%,75% 100%, 53% 31%);}
#nt3{clip-path:polygon(49% 36%, 49% 36%, 70% 100%,0% 100%);}
#nt1:hover,#nt3:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%,0% 100%); filter:grayscale(0);}
#nt2:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%,0% 100%, 0% 31%); filter:grayscale(0);}
--></style>