• Montage 109

    7 images au ratio 16/9; clic maintenu.

    La version précédente utilisait un autre principe de code; j'ai repris les paramètres du clip pour obtenir ce résultat.

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black;">
    <p id="clip1">&nbsp;</p>
    <p id="clip2">&nbsp;</p>
    <p id="clip3">&nbsp;</p>
    <p id="clip4">&nbsp;</p>
    <p id="clip5">&nbsp;</p>
    <p id="clip6">&nbsp;</p>
    <p id="clip7">&nbsp;</p>
    </div>
    <style><!--
    #clip1{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/DvYSfvcYTRT-9C-vkTTyEvrIQhI.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; clip-path: polygon(2vw 31.75vw, 58vw 31.75vw, 58vw 2vw, 2vw 2vw, 2vw 31.75vw, 2vw 33.75vw, 0vw 33.75vw, 0vw 0vw, 60vw 0vw, 60vw 33.75vw, 2vw 33.75vw); -webkit-clip-path: polygon(2vw 31.75vw, 58vw 31.75vw, 58vw 2vw, 2vw 2vw, 2vw 31.75vw, 2vw 33.75vw, 0vw 33.75vw, 0vw 0vw, 60vw 0vw, 60vw 33.75vw, 2vw 33.75vw); transition:all 1s linear;}
    #clip2{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/b5_bF21cBnMvy6koXDVPghi7alU.jpg'); background-size:60vw 33.75vw; background-position:-2.5vw -2.5vw; clip-path: polygon(2vw 26.75vw, 53vw 26.75vw, 53vw 2vw, 2vw 2vw, 2vw 26.75vw, 2vw 28.75vw, 0vw 28.75vw, 0vw 0vw, 55vw 0vw, 55vw 28.75vw, 2vw 28.75vw); -webkit-clip-path: polygon(2vw 26.75vw, 53vw 26.75vw, 53vw 2vw, 2vw 2vw, 2vw 26.75vw, 2vw 28.75vw, 0vw 28.75vw, 0vw 0vw, 55vw 0vw, 55vw 28.75vw, 2vw 28.75vw); transform:translate(2.5vw,2.5vw); transition:all 1s linear;}
    #clip3{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/TFeTJ4_P_rPTUzJg9eEb4v4lzts.jpg'); background-size:60vw 33.75vw; background-position:-5vw -5vw; clip-path: polygon(2vw 21.75vw, 48vw 21.75vw, 48vw 2vw, 2vw 2vw, 2vw 21.75vw, 2vw 23.75vw, 0vw 23.75vw, 0vw 0vw, 50vw 0vw, 50vw 23.75vw, 2vw 23.75vw); -webkit-clip-path: polygon(2vw 21.75vw, 48vw 21.75vw, 48vw 2vw, 2vw 2vw, 2vw 21.75vw, 2vw 23.75vw, 0vw 23.75vw, 0vw 0vw, 50vw 0vw, 50vw 23.75vw, 2vw 23.75vw); transform:translate(5vw,5vw); transition:all 1s linear;}
    #clip4{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/tHm-WKgNt4_9y0yq8wbOYEDl4Qk.jpg'); background-size:60vw 33.75vw; background-position:-7.5vw -7.5vw; clip-path: polygon(2vw 16.75vw, 43vw 16.75vw, 43vw 2vw, 2vw 2vw, 2vw 16.75vw, 2vw 18.75vw, 0vw 18.75vw, 0vw 0vw, 45vw 0vw, 45vw 18.75vw, 2vw 18.75vw); -webkit-clip-path: polygon(2vw 16.75vw, 43vw 16.75vw, 43vw 2vw, 2vw 2vw, 2vw 16.75vw, 2vw 18.75vw, 0vw 18.75vw, 0vw 0vw, 45vw 0vw, 45vw 18.75vw, 2vw 18.75vw); transform:translate(7.5vw,7.5vw); transition:all 1s linear;}
    #clip5{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/1qwlZod-BCrCfAhob4OUjvEmvbI.jpg'); background-size:60vw 33.75vw; background-position:-10vw -10vw; clip-path: polygon(2vw 11.75vw, 38vw 11.75vw, 38vw 2vw, 2vw 2vw, 2vw 11.75vw, 2vw 13.75vw, 0vw 13.75vw, 0vw 0vw, 40vw 0vw, 40vw 13.75vw, 2vw 13.75vw); -webkit-clip-path: polygon(2vw 11.75vw, 38vw 11.75vw, 38vw 2vw, 2vw 2vw, 2vw 11.75vw, 2vw 13.75vw, 0vw 13.75vw, 0vw 0vw, 40vw 0vw, 40vw 13.75vw, 2vw 13.75vw); transform:translate(10vw,10vw); transition:all 1s linear;}
    #clip6{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/RkUg1_pmdWxaSPxJn5p-6PcgV1k.jpg'); background-size:60vw 33.75vw; background-position:-12.5vw -12.5vw; clip-path: polygon(2vw 6.75vw, 33vw 6.75vw, 33vw 2vw, 2vw 2vw, 2vw 6.75vw, 2vw 8.75vw, 0vw 8.75vw, 0vw 0vw, 35vw 0vw, 35vw 8.75vw, 2vw 8.75vw); -webkit-clip-path: polygon(2vw 6.75vw, 33vw 6.75vw, 33vw 2vw, 2vw 2vw, 2vw 6.75vw, 2vw 8.75vw, 0vw 8.75vw, 0vw 0vw, 35vw 0vw, 35vw 8.75vw, 2vw 8.75vw); transform:translate(12.5vw,12.5vw); transition:all 1s linear;}
    #clip7{position:absolute; z-index:1; width:30vw; height:2vw; background:url('http://ekladata.com/GuLeO-WIBKFiYy-lFCV3Gwd5qBQ.jpg'); background-size:60vw 33.75vw; background-position:-15vw -16vw; transform:translate(15vw,16vw); transition:all 1s linear;}
    #clip1:active,#clip2:active,#clip3:active,#clip4:active,#clip5:active,#clip6:active,#clip7:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); clip-path: polygon(30vw 17vw, 30vw 17vw, 30vw 17vw, 30vw 17vw, 30vw 17vw, 5vw 33.75vw, 0vw 33.75vw, 0vw 0vw, 60vw 0vw, 60vw 33.75vw, 5vw 33.75vw); -webkit-clip-path: polygon(30vw 17vw, 30vw 17vw, 30vw 17vw, 30vw 17vw, 30vw 17vw, 5vw 33.75vw, 0vw 33.75vw, 0vw 0vw, 60vw 0vw, 60vw 33.75vw, 5vw 33.75vw); background-position:0vw 0vw;}
    --></style>