• Montage 96

    ...

    Clic maintenu

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background:url('http://ekladata.com/JUY1dRK-Fw2X0t8J5rTs9LgJ27s.jpg'); background-size:60vw 33.75vw;">
    <p id="cp0">Clic maintenu</p>
    <p id="cp1">&nbsp;</p>
    <p id="cp2">&nbsp;</p>
    <p id="cp3">&nbsp;</p>
    <p id="cp4">&nbsp;</p>
    <p id="cp5">&nbsp;</p>
    <p id="cp6">&nbsp;</p>
    </div>
    <style><!--
    #cp0{position:absolute; z-index:1; width:10vw; border:0.1vh solid white; font-size:1.2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(25vw,0.5vw);}
    #cp1{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/4W9bdXSN4k07wqnfGFZtVTTbpZU.jpg'); background-size:60vw 33.75vw; background-position:0vw -2vw; transform:translate(0vw,2vw); -webkit-clip-path: polygon(0% 0%, 50% 50%,50% 50%, 0% 100%); clip-path: polygon(0% 0%, 50% 50%, 50% 50%, 0% 100%);transition:all 1s linear;}
    #cp2{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/LHnMza956BbkvdjJm77RHLCvhvg.jpg'); background-size:60vw 33.75vw; background-position:0vw -12vw; transform:translate(0vw,12vw); -webkit-clip-path: polygon(0% 0%, 50% 50%,50% 50%, 0% 100%); clip-path: polygon(0% 0%, 50% 50%, 50% 50%, 0% 100%);transition:all 1s linear;}
    #cp3{position:absolute; z-index:1; width:16vw; height:9vw; background:url('http://ekladata.com/EwL-Gm98fufAgI_ijTvNUdTPfVE.jpg'); background-size:60vw 33.75vw; background-position:0vw -22vw; transform:translate(0vw,22vw); -webkit-clip-path: polygon(0% 0%, 50% 50%,50% 50%, 0% 100%); clip-path: polygon(0% 0%, 50% 50%, 50% 50%, 0% 100%);transition:all 1s linear;}
    #cp4{position:absolute; z-index:1; width:9vw; height:9vw; background:url('http://ekladata.com/LcESiHx7L36DodVeKzyr9JFmzt4.jpg'); background-size:60vw 33.75vw; background-position:-51vw -2vw; transform:translate(51vw,2vw); -webkit-clip-path: polygon(0% 50%, 100% 0%,100% 100%, 0% 50%); clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);transition:all 1s linear;}
    #cp5{position:absolute; z-index:1; width:9vw; height:9vw; background:url('http://ekladata.com/rvwZKKUhM30vn2NQKz4FYRKPac0.jpg'); background-size:60vw 33.75vw; background-position:-51vw -12vw; transform:translate(51vw,12vw); -webkit-clip-path: polygon(0% 50%, 100% 0%,100% 100%, 0% 50%); clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);transition:all 1s linear;}
    #cp6{position:absolute; z-index:1; width:9vw; height:9vw; background:url('http://ekladata.com/-O2a5uxtsQWc2aAE_CLFsPyK9Pc.jpg'); background-size:60vw 33.75vw; background-position:-51vw -22vw; transform:translate(51vw,22vw); -webkit-clip-path: polygon(0% 50%, 100% 0%,100% 100%, 0% 50%); clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);transition:all 1s linear;}
    #cp1:active, #cp2:active, #cp3:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); -webkit-clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%); clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%); background-position:0vw 0vw;}
    #cp4:active, #cp5:active, #cp6:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); -webkit-clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%); clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%);background-position:0vw 0vw;}
    --></style>