• 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>