• Exemple 26

    8 images au ratio 16/9, dimensionnées dans le code en 1152x648px; Survol.

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; margin: 1vh auto; background: linear-gradient(to bottom,#F5BCA9 0%,#F5ECCE 100%);">
    <p id="feu1" class="feu">&nbsp;</p>
    <p id="feu2" class="feu">&nbsp;</p>
    <p id="feu3" class="feu">&nbsp;</p>
    <p id="feu4" class="feu">&nbsp;</p>
    <p id="feu5" class="feu">&nbsp;</p>
    <p id="feu6" class="feu">&nbsp;</p>
    <p id="feu7" class="feu">&nbsp;</p>
    <p id="feu8" class="feu">&nbsp;</p>
    </div>

    <style><!--
    .feu{position:absolute; z-index:1; width:60vw; height:33.75vw; background-size:cover; transition:all 1s linear;}
    #feu1{background:url('http://ekladata.com/MjZyRtv-JVznDLH4F0ocIxInPgQ@1152x648.jpg'); clip-path: polygon(8.75vw 0vw,13.75vw 0vw,0vw 15.75vw,0vw 9.75vw);}
    #feu2{background:url('http://ekladata.com/JnydgtRKBOUWoC3O9DMLzNVqpl8@1152x648.jpg'); clip-path: polygon(18.75vw 0vw,23.75vw 0vw,0vw 27.75vw,0vw 21.75vw);}
    #feu3{background:url('http://ekladata.com/dclv6Hwe8fAF26HcXh3IJMuiyVA@1152x648.jpg'); clip-path: polygon(28.75vw 0vw,33.75vw 0vw,5vw 33.75vw,0vw 33.75vw);}
    #feu4{background:url('http://ekladata.com/rBLEF1uIxRayZwbhy_KVXXMXZUM@1152x648.jpg'); clip-path: polygon(38.75vw 0vw,43.75vw 0vw,15vw 33.75vw,10vw 33.75vw);}
    #feu5{background:url('http://ekladata.com/wspd70U8Zu70oEw2GzuzCGSbi2A@1152x648.jpg'); clip-path: polygon(48.75vw 0vw,53.75vw 0vw,25vw 33.75vw,20vw 33.75vw);}
    #feu6{background:url('http://ekladata.com/75KikHuhD2ZCVvRaiiASw65K-g8@1152x648.jpg'); clip-path: polygon(58.75vw 0vw,63.75vw 0vw,35vw 33.75vw,30vw 33.75vw);}
    #feu7{background:url('http://ekladata.com/gAuCYKVn-n7uLmGABdh1TKAXAW0@1152x648.jpg'); clip-path: polygon(68.75vw 0vw,73.75vw 0vw,45vw 33.75vw,40vw 33.75vw);}
    #feu8{background:url('http://ekladata.com/EnSevanpE5IwifQIOSV3F-_FgV0@1152x648.jpg'); clip-path: polygon(78.75vw 0vw,83.75vw 0vw,55vw 33.75vw,50vw 33.75vw);}
    #feu1:hover,#feu2:hover,#feu3:hover,#feu4:hover,#feu5:hover,#feu6:hover,#feu7:hover,#feu8:hover{z-index:5;clip-path: polygon(0vw 0vw,60vw 0vw,60vw 33.75vw,0vw 33.75vw);}
    --></style>