• Exemple 75

    Survol:  9 images au ratio 16/9, redimensionnées en 1152x648px par le code.

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
    <p id="ctr1" class="ctr">&nbsp;</p>
    <p id="ctr2" class="ctr">&nbsp;</p>
    <p id="ctr3" class="ctr">&nbsp;</p>
    <p id="ctr4" class="ctr">&nbsp;</p>
    <p id="ctr5" class="ctr">&nbsp;</p>
    <p id="ctr6" class="ctr">&nbsp;</p>
    <p id="ctr7" class="ctr">&nbsp;</p>
    <p id="ctr8" class="ctr">&nbsp;</p>
    <p id="ctr9" class="ctr">&nbsp;</p>
    </div>

    <style><!--
    .ctr{position:absolute; z-index:1; width:60vw; height:33.75vw; background-size:60vw 33.75vw; filter:grayscale(1); transition: clip-path 1s linear 0s, filter 1s linear 1s;}
    #ctr1{background:url('http://ekladata.com/RT2d3vP5GR-IL-pLzGiculYVLVk@1152x648.jpg'); clip-path: polygon(50% 10%, 70% 50%, 50% 90%, 30% 50%);}
    #ctr2{background:url('http://ekladata.com/MJALLAFQMB4YzrsC3CBVIbkCeEs@1152x648.jpg'); clip-path: polygon(5% 10%, 40% 10%, 34% 22%, 5% 22%);}
    #ctr3{background:url('http://ekladata.com/5Q9hDoleR7MYQxUq8uRtiR94p04@1152x648.jpg'); clip-path: polygon(5% 32%, 30% 32%, 24% 44%, 5% 44%);}
    #ctr4{background:url('http://ekladata.com/XDrDFbAtynRbEaRt-CSI9D5D9YU@1152x648.jpg'); clip-path: polygon(60% 10%, 95% 10%, 95% 22%, 66% 22%);}
    #ctr5{background:url('http://ekladata.com/dzv9cqQScRxX1zrGDtrgw1P2QFw@1152x648.jpg'); clip-path: polygon(70% 32%, 95% 32%, 95% 44%, 77% 44%);}
    #ctr6{background:url('http://ekladata.com/thMSgC2dqNO4n3x3uA8BUGkigqI@1152x648.jpg'); clip-path: polygon(76% 55%, 95% 55%, 95% 68%, 70% 68%);}
    #ctr7{background:url('http://ekladata.com/Ga26Ht_5_3OOK6HZufu8KNtKtfo@1152x648.jpg'); clip-path: polygon(66% 76%, 95% 76%, 95% 90%, 59% 90%);}
    #ctr8{background:url('http://ekladata.com/hfm_eJuVTxOPwFWfYBpufJYWk2A@1152x648.jpg'); clip-path: polygon(5% 76%, 33% 76%, 40% 90%, 5% 90%);}
    #ctr9{background:url('http://ekladata.com/gJACKYFIZGZqi2iCOFyFOCwQPas@1152x648.jpg'); clip-path: polygon(5% 55%, 24% 55%, 30% 68%, 5% 68%);}
    #ctr1:hover,#ctr2:hover,#ctr3:hover,#ctr4:hover,#ctr5:hover,#ctr6:hover,#ctr7:hover,#ctr8:hover,#ctr9:hover{z-index:5;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter:grayscale(0)}
    --></style>