-
Exemple 36
Survol
<div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
<p id="fd1" class="fd"><img style="width: 60vw; height: 33.75vw; border-radius: 50%;" src="http://ekladata.com/JrvgM--uJo1e4EcwtXQEpFVgxPc@1152x648.jpg" alt="" /></p>
<p id="fd2" class="fd"><img style="width: 60vw; height: 33.75vw; border-radius: 50%;" src="http://ekladata.com/I8AiXtNi41RoT0gy-hQu4BwFsrA@1152x648.jpg" alt="" /></p>
<p id="fd3" class="fd"><img style="width: 60vw; height: 33.75vw; border-radius: 50%;" src="http://ekladata.com/fMyk_xW77v6Jv4Tl7pRft9gAeFA@1152x648.jpg" alt="" /></p>
<p id="fd4" class="fd"><img style="width: 60vw; height: 33.75vw; border-radius: 50%;" src="http://ekladata.com/_1HoPjfSlrCPi6-ETI-CuYFRiLg@1152x648.jpg" alt="" /></p>
<p id="fd5" class="fd"><img style="width: 60vw; height: 33.75vw; border-radius: 50%;" src="http://ekladata.com/CeCwZou58tWQ01d9wfX95DTg5Q4@1152x648.jpg" alt="" /></p>
<p id="fd6" class="fd"><img style="width: 60vw; height: 33.75vw; border-radius: 50%;" src="http://ekladata.com/k8BHm8StS91Vn234gJduifmFlRw@1152x648.jpg" alt="" /></p>
</div>
<style><!--
.fd{position:absolute; z-index:1; width:8vw; height:33.75vw;transition:all 1s linear;}
#fd1{clip-path: polygon(0vw 0vw, 8vw 0vw, 8vw 100vw, 0vw 100vw);}
#fd2{clip-path: polygon(10.4vw 0vw, 18.4vw 0vw, 18.4vw 100vw, 10.4vw 100vw);}
#fd3{clip-path: polygon(20.8vw 0vw, 28.8vw 0vw, 28.8vw 100vw, 20.8vw 100vw);}
#fd4{clip-path: polygon(31.2vw 0vw, 39.2vw 0vw, 39.2vw 100vw, 31.2vw 100vw);}
#fd5{clip-path: polygon(41.6vw 0vw, 49.6vw 0vw, 49.6vw 100vw, 41.6vw 100vw);}
#fd6{clip-path: polygon(52vw 0vw, 60vw 0vw, 60vw 100vw, 52vw 100vw);}
#fd1:hover,#fd2:hover,#fd3:hover,#fd4:hover,#fd5:hover,#fd6:hover{z-index:5; clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 100vw, 0vw 100vw);transform:translate(0vw,0vw);}
--></style>