• Exemple 133

    10 images au ratio 16/9. SURVOL 

     

     

     

     

     

     

     

     

     

     


    Pour celles et ceux qui s'intéressent aux codes html/css et ne particulier à l'attribut clip-path, qui permet de découper une zone précise d'une image, comme avec un ciseau, l'unité de base pour les points de découpe est le % et les pixels.

    Heureusement, les unités adaptatives viewport (vw et vh) sont également acceptées, ce qui est plus simple pour bien déterminer chaque point.


    <div style="width:60vw; height:33.75vw; margin:1vh auto;">
    <p id="pal1" class="pal">&nbsp;</p>
    <p id="pal2" class="pal">&nbsp;</p>
    <p id="pal3" class="pal">&nbsp;</p>
    <p id="pal4" class="pal">&nbsp;</p>
    <p id="pal5" class="pal">&nbsp;</p>
    <p id="pal6" class="pal">&nbsp;</p>
    <p id="pal7" class="pal">&nbsp;</p>
    <p id="pal8" class="pal">&nbsp;</p>
    <p id="pal9" class="pal">&nbsp;</p>
    <p id="pal10" class="pal">&nbsp;</p>
    </div>

    <style><!--
    .pal{position:absolute; z-index:1; width:60vw; height:33.75vw; background-size:60vw 33.75vw; transform:translate(0vw,0vw); transition:all 1s linear;}
    #pal1{background:url('http://ekladata.com/BDhkcLw_liu4iMVb4jHay-jv50o.jpg'); clip-path:polygon(0vw 0vw, 6.5vw 0vw, 6.5vw 7vw, 0vw 5vw);}
    #pal2{background:url('http://ekladata.com/f6uajhYCg6dsFsab_QHeFFYZ4Ho.jpg'); clip-path:polygon(13vw 0vw, 19.5vw 0vw, 19.5vw 11vw, 13vw 9vw);}
    #pal3{background:url('http://ekladata.com/RO3T8ie1c-b_l8w23C1a0hJjs5E.jpg'); clip-path:polygon(26vw 0vw, 34vw 0vw, 34vw 13vw, 30vw 14.5vw, 26vw 13vw);}
    #pal4{background:url('http://ekladata.com/hCbmuvUmJJ_L68BVTYWHnsKiCrM.jpg'); clip-path:polygon(40.5vw 0vw, 47vw 0vw, 47vw 9vw, 40.5vw 11vw);}
    #pal5{background:url('http://ekladata.com/jYV8so6iwmxhwylkjj6PxRlrAcE.jpg'); clip-path:polygon(53.5vw 0vw, 60vw 0vw, 60vw 5vw, 53.5vw 7vw);}
    #pal6{background:url('http://ekladata.com/UusrbQKhbvVFj7INVcA8c77szgs.jpg'); clip-path:polygon(0vw 13.75vw, 6.5vw 15.75vw, 6.5vw 33.75vw, 0vw 33.75vw);}
    #pal7{background:url('http://ekladata.com/Ii9TLpQC75GmcHFFlpToJwT2AVQ.jpg'); clip-path:polygon(13vw 17.75vw, 19.5vw 19.75vw, 19.5vw 33.75vw, 13vw 33.75vw);}
    #pal8{background:url('http://ekladata.com/H-DUeiflfd5yr5__5vJuata82Zk.jpg'); clip-path:polygon(26vw 21.75vw, 30vw 22.75vw, 34vw 21.75vw, 34vw 33.75vw, 26vw 33.75vw);}
    #pal9{background:url('http://ekladata.com/TDgytImg8NZmCsxNsRO1i5GuQpQ.jpg'); clip-path:polygon(40.5vw 19.75vw, 47vw 17.75vw, 47vw 33.75vw, 40.5vw 33.75vw);}
    #pal10{background:url('http://ekladata.com/6_WqT7ksfjHHr2upFO9uoTBMvlk.jpg'); clip-path:polygon(53.5vw 15.75vw, 60vw 13.75vw, 60vw 33.75vw, 53.5vw 33.75vw);}
    #pal1:hover,#pal2:hover,#pal4:hover,#pal5:hover,#pal6:hover,#pal7:hover,#pal9:hover,#pal10:hover{z-index:5; clip-path:polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);}
    #pal3:hover{z-index:5; clip-path:polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 30vw 33.75vw, 0vw 33.75vw);}
    #pal8:hover{z-index:5; clip-path:polygon(0vw 0vw, 30vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);}
    --></style>