• Exemple 28

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

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: linear-gradient(to bottom, #01DFA5 0%, #81F7F3 100%);">
    <p id="tr1" class="tr">&nbsp;</p>
    <p id="tr2" class="tr">&nbsp;</p>
    <p id="tr3" class="tr">&nbsp;</p>
    <p id="tr4" class="tr">&nbsp;</p>
    <p id="tr5" class="tr">&nbsp;</p>
    <p id="tr6" class="tr">&nbsp;</p>
    <p id="tr7" class="tr">&nbsp;</p>
    <p id="tr8" class="tr">&nbsp;</p>
    <p id="tr9" class="tr">&nbsp;</p>
    </div>
    <style><!--
    .tr{position:absolute; z-index:1; width:60vw; height:33.75vw; background-size:60vw 33.75vw; transition:all 1s linear;}
    #tr1{background:url('http://ekladata.com/-84h-8daUSSVAvS7L3O-geEcDP0@1152x648.jpg'); background-position:0vw 0vw; transform:translate(0vw,0vw); clip-path: polygon(0% 0%, 10% 70%, 10% 70%, 20% 0%);}
    #tr2{background:url('http://ekladata.com/0EJyJGchf-fCgzqHUtRzxvF3gaM@1152x648.jpg'); background-position:-12vw 0vw; transform:translate(12vw,0vw); clip-path: polygon(0% 0%, 10% 70%, 10% 70%, 20% 0%);}
    #tr3{background:url('http://ekladata.com/R66nssftpCbc73Ot1KxpEfljxiU@1152x648.jpg'); background-position:-24vw 0vw; transform:translate(24vw,0vw); clip-path: polygon(0% 0%, 10% 70%, 10% 70%, 20% 0%);}
    #tr4{background:url('http://ekladata.com/H01gZsmFk2htzSYqCt5UR9jCDbA@1152x648.jpg'); background-position:-36vw 0vw; transform:translate(36vw,0vw); clip-path: polygon(0% 0%, 10% 70%, 10% 70%, 20% 0%);}
    #tr5{background:url('http://ekladata.com/2RaEAi-jqGCOe79Yx-2Cqzj268Q@1152x648.jpg'); background-position:-48vw 0vw; transform:translate(48vw,0vw); clip-path: polygon(0% 0%, 10% 70%, 10% 70%, 20% 0%);}
    #tr6{background:url('http://ekladata.com/XYyB_WGaD65p43bLWUgp3kMDUpc@1152x648.jpg'); background-position:0vw -10vw; transform:translate(0vw,10vw); clip-path: polygon(10% 70%, 20% 0%, 20% 0%, 30% 70%);}
    #tr7{background:url('http://ekladata.com/LN979v5vP8FzKoj1FsRF17xSFJw@1152x648.jpg'); background-position:-12vw -10vw; transform:translate(12vw,10vw); clip-path: polygon(10% 70%, 20% 0%, 20% 0%, 30% 70%);}
    #tr8{background:url('http://ekladata.com/ILxYy3mGkQY4Uhn5SM06AhTjo_E@1152x648.jpg'); background-position:-24vw -10vw; transform:translate(24vw,10vw); clip-path: polygon(10% 70%, 20% 0%, 20% 0%, 30% 70%);}
    #tr9{background:url('http://ekladata.com/CgqYxCP0DaN1McRzFUroxBJOPUs@1152x648.jpg'); background-position:-36vw -10vw; transform:translate(36vw,10vw); clip-path: polygon(10% 70%, 20% 0%, 20% 0%, 30% 70%);}
    #tr1:hover,#tr2:hover,#tr3:hover,#tr4:hover,#tr5:hover{z-index:5; background-position:0vw 0vw; transform:translate(0vw,0vw); clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);}
    #tr6:hover,#tr7:hover,#tr8:hover,#tr9:hover{z-index:5; background-position:0vw 0vw; transform:translate(0vw,0vw); clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%);}
    --></style>