• Montage 101

    5 images au ratio 16/9.

    Clic maintenu

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto;">
    <p id="cm">Clic maintenu</p>
    <p id="ang1" class="ang">&nbsp;</p>
    <p id="ang2" class="ang">&nbsp;</p>
    <p id="ang3" class="ang">&nbsp;</p>
    <p id="ang4" class="ang">&nbsp;</p>
    <p id="ang5" class="ang">&nbsp;</p>
    </div>
    <style><!--
    #cm{position:absolute; z-index:1; width:15vw; text-align:center; font-size:1.5vw; transform:translate(22.5vw,11.5vw);}
    .ang{position:absolute; z-index:1; width:60vw; height:33.75vw; transform:translate(0vw,0vw); background-size:60vw 33.75vw; background-position:0vw 0vw; transition:all 1s linear;}
    #ang1{background:url('http://ekladata.com/ZNLSI-EBG4EJ1DU_eo-nUwpdRWA.jpg');-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 6% 10%,6% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 6% 10%,6% 100%, 0% 100%); transition:all 1s linear;}
    #ang2{background:url('http://ekladata.com/Y8z9VNqDRBuUI8ubB3YUIbviKgU.jpg');-webkit-clip-path: polygon(94% 18.5%, 100% 18.5%, 100% 100%, 10.5% 100%,10.5% 90%, 94% 90%); clip-path: polygon(94% 18.5%, 100% 18.5%, 100% 100%, 10.5% 100%,10.5% 90%, 94% 90%);}
    #ang3{background:url('http://ekladata.com/sXF-w2IPuhneX8exIsFp5oA9VSk.jpg'); -webkit-clip-path: polygon(10.5% 18.5%, 89.5% 18.5%, 89.5% 28.5%, 16.5% 28.5%,16.5% 81.5%, 10.5% 81.5%); clip-path: polygon(10.5% 18.5%, 89.5% 18.5%, 89.5% 28.5%, 16.5% 28.5%,16.5% 81.5%, 10.5% 81.5%);}
    #ang4{background:url('http://ekladata.com/y1noXtfu1NoQ5o4GRFfrVzG9scw.jpg');-webkit-clip-path: polygon(83.5% 37%, 89.5% 37%, 100% 90%, 16.5% 90%,16.5% 80%, 83.5% 80%); clip-path: polygon(83.5% 37%, 89.5% 37%, 89.5% 81.5%, 22.5% 81.5%,22.5% 71.5%, 83.5% 71.5%);}
    #ang5{background:url('http://ekladata.com/a0RDOgSX5XdOE-2a7P9fAEK2VFQ.jpg');-webkit-clip-path: polygon(22.5% 45%, 77.5% 45%, 77.5% 55%, 22.5% 55%); clip-path: polygon(22.5% 45%, 77.5% 45%, 77.5% 55%, 22.5% 55%);}
    #ang1:active,#ang3:active{z-index:5; transform:translate(0vw,0vw);-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 100% 100%,6% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 100% 100%,6% 100%, 0% 100%);}
    #ang2:active,#ang4:active{z-index:5; transform:translate(0vw,0vw); -webkit-clip-path: polygon(94% 0%, 100% 0%, 100% 100%, 0% 100%,0% 90%, 0% 0%); clip-path: polygon(94% 0%, 100% 0%, 100% 100%, 0% 100%,0% 90%, 0% 0%);}
    #ang5:active{z-index:5; transform:translate(0vw,0vw); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    --></style>