• Exemple 157

    Pour 8 images au ratio 16/9 (exemple 1920px par 1080px); survol.

    Remplacez mes adresses images en bleu par les vôtres.

     

     

     

     

     

     

     

     

    Survol

    <div style="width:60vw; height:33.75vw; margin:1vh auto;">
    <p id="us1" class="us">&nbsp;</p>
    <p id="us2" class="us">&nbsp;</p>
    <p id="us3" class="us">&nbsp;</p>
    <p id="us4" class="us">&nbsp;</p>
    <p id="us5" class="us">&nbsp;</p>
    <p id="us6" class="us">&nbsp;</p>
    <p id="us7" class="us">&nbsp;</p>
    <p id="us8" class="us">&nbsp;</p>
    <p id="us9" >Survol</p>
    </div>

    <style><!--
    .us{position:absolute; z-index:1; width:60vw; height:33.75vw; transition:all 1s linear;}
    #us1{background:url('http://ekladata.com/hIuolN0z2CCdtVjQ1HHT1sm3tA4.jpg'); background-size:60vw 33.75vw; clip-path:polygon(0vw 0vw, 5vw 0vw,15vw 17vw, 10vw 17vw);}
    #us2{background:url('http://ekladata.com/EtenJW7qgFGqqwZxZ3BDj65Ae7I.jpg'); background-size:60vw 33.75vw; clip-path:polygon(25vw 0vw, 30vw 0vw,20vw 17vw, 15vw 17vw);}
    #us3{background:url('http://ekladata.com/X5ro5G6wGCJnStSupYzfudT--sM.jpg'); background-size:60vw 33.75vw; clip-path:polygon(30vw 0vw, 35vw 0vw,45vw 17vw, 40vw 17vw);}
    #us4{background:url('http://ekladata.com/4hNHZyd8q3h1uHmgrdnINZaKbeo.jpg'); background-size:60vw 33.75vw; clip-path:polygon(55vw 0vw, 60vw 0vw,50vw 17vw, 45vw 17vw);}
    #us5{background:url('http://ekladata.com/-uWeSz14-PzXey4PJg7YFyeRyk0.jpg'); background-size:60vw 33.75vw; clip-path:polygon(10vw 17vw, 15vw 17vw,5vw 33.75vw, 0vw 33.75vw);}
    #us6{background:url('http://ekladata.com/mwXTZcegMcEEE5v8H9kztt3_qHQ.jpg'); background-size:60vw 33.75vw; clip-path:polygon(15vw 17vw, 20vw 17vw,30vw 33.75vw, 25vw 33.75vw);}
    #us7{background:url('http://ekladata.com/cKbzSRS_KFnFT7137FQEUt-8c-0.jpg'); background-size:60vw 33.75vw; clip-path:polygon(40vw 17vw, 45vw 17vw,35vw 33.75vw, 30vw 33.75vw);}
    #us8{background:url('http://ekladata.com/lzW066GrBMK1y7MU_E__cJo-_jc.jpg'); background-size:60vw 33.75vw; clip-path:polygon(45vw 17vw, 50vw 17vw,60vw 33.75vw, 55vw 33.75vw);}
    #us9{position:absolute; z-index:1; width:60vw; font-size:1.5vw; transform:translate(0vw,16.5vw);}
    #us1:hover,#us2:hover,#us3:hover,#us4:hover,#us5:hover,#us6:hover,#us7:hover,#us8:hover{z-index:5; clip-path:polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);}
    --></style>