• Montage 102

    Montage en 60% de la largeur de votre écran: 5 images au ratio 16/9.

    Clic maintenu

     

     

     

     

     

    <div style="width: 60vw; height: 33.72vw; margin: 1vh auto;">
    <p id="cc">Clic maintenu</p>
    <p id="ph1" class="ph">&nbsp;</p>
    <p id="ph2" class="ph">&nbsp;</p>
    <p id="ph3" class="ph">&nbsp;</p>
    <p id="ph4" class="ph">&nbsp;</p>
    <p id="ph5" class="ph">&nbsp;</p>
    </div>

    <style><!--
    #cc{position:absolute;z-index:1; width:20vw; text-align:center;font-size:1.5vw; transform:translate(20vw,9.5vw);}
    .ph{position:absolute;z-index:1; width:60vw; height:33.75vw; background-size:60vw 33.75vw; transition:all 1s linear;}
    #ph1{background:url('http://ekladata.com/-v671Qhg2h4EainlgfOoJ-Q8bQw.jpg');-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,94% 100%,94% 10%, 6% 10%,6% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,94% 100%,94% 10%, 6% 10%,6% 100%,0% 100%);}
    #ph2{background:url('http://ekladata.com/3cZ6QtbIshF02ecrukF0T4r5ooo.jpg');-webkit-clip-path: polygon(10% 18%, 90% 18%, 90% 100%,84% 100%,84% 28%, 16% 28%,16% 100%,10% 100%); clip-path: polygon(10% 18%, 90% 18%, 90% 100%,84% 100%,84% 28%, 16% 28%,16% 100%,10% 100%);}
    #ph3{background:url('http://ekladata.com/ULJkFkDD25tUiDQEPPtmDmFSffk.jpg');-webkit-clip-path: polygon(20% 36%, 80% 36%, 80% 100%,74% 100%,74% 46%, 26% 46%,26% 100%,20% 100%); clip-path: polygon(20% 36%, 80% 36%, 80% 100%,74% 100%,74% 46%, 26% 46%,26% 100%,20% 100%);}
    #ph4{background:url('http://ekladata.com/NfIAiOsRsoRj0aqFNr8HoHQaX2w.jpg');-webkit-clip-path: polygon(30% 54%, 70% 54%, 70% 100%,64% 100%,64% 64%, 36% 64%,36% 100%,30% 100%); clip-path: polygon(30% 54%, 70% 54%, 70% 100%,64% 100%,64% 64%, 36% 64%,36% 100%,30% 100%);}
    #ph5{background:url('http://ekladata.com/ehIH1JTI-O6TGDnvezShuMhCtNE.jpg');-webkit-clip-path: polygon(40% 72%, 60% 72%, 60% 100%,54% 100%,54% 82%, 46% 82%,46% 100%,40% 100%); clip-path: polygon(40% 72%, 60% 72%, 60% 100%,54% 100%,54% 82%, 46% 82%,46% 100%,40% 100%);}
    #ph1:active{z-index:5; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,94% 100%,94% 100%, 6% 100%,6% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,94% 100%,94% 100%, 6% 100%,6% 100%,0% 100%);}
    #ph2:active{z-index:5; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,84% 100%,84% 100%, 16% 100%,16% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,84% 100%,84% 100%, 16% 100%,16% 100%,0% 100%);}
    #ph3:active{z-index:5; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,74% 100%,74% 100%, 26% 100%,26% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,74% 100%,74% 100%, 26% 100%,26% 100%,0% 100%);}
    #ph4:active{z-index:5; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,64% 100%,64% 100%, 36% 100%,36% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,64% 100%,64% 100%, 36% 100%,36% 100%,0% 100%);}
    #ph5:active{z-index:5; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%,54% 100%,54% 100%, 46% 100%,46% 100%,0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%,54% 100%,54% 100%, 46% 100%,46% 100%,0% 100%);}
    --></style>