• Montage 13 clic maintenu

    Le nombre d'images est à votre choix. Version clic maintenu: commande active.

     

     

     

     

     

     

     

     

     

     

     

     

    Clic maintenu


    <div style="width:60vw; height:33.75vw; border:0.4vh ridge white; margin:1vh auto; background:url('http://ekladata.com/Pr3acYR3UBGxR6cljiR6e3x_m8o.jpg'); background-size:cover;">
    <p id="vg1" class="vg">&nbsp;</p>
    <p id="vg2" class="vg">&nbsp;</p>
    <p id="vg3" class="vg">&nbsp;</p>
    <p id="vg4" class="vg">&nbsp;</p>
    <p id="vg5" class="vg">&nbsp;</p>
    <p id="vg6" class="vg">&nbsp;</p>
    <p id="fd1" class="fd">&nbsp;</p>
    <p id="fd2" class="fd">&nbsp;</p>
    <p id="fd3" class="fd">&nbsp;</p>
    <p id="fd4" class="fd">&nbsp;</p>
    <p id="fd5" class="fd">&nbsp;</p>
    <p id="fd6" class="fd">&nbsp;</p>
    <p id="cc">Clic maintenu</p>
    </div>

    <style><!--
    .vg{position:absolute; z-index:10; width:8vw; height:2.75vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black;}
    #vg1{box-sizing:border:box; background:url('http://ekladata.com/t6MqmzadHFU4IxN43ZLlGS9Mdnk.jpg'); background-size:cover; transform:translate(1vw,30vw);}
    #vg2{box-sizing:border:box; background:url('http://ekladata.com/w2MmhRYvuLftXN1LgKdf5Rd6qXU.jpg'); background-size:cover; transform:translate(10vw,30vw);}
    #vg3{box-sizing:border:box; background:url('http://ekladata.com/6N-DWx5VuV-JimFOFzoRCdR2VGU.jpg'); background-size:cover; transform:translate(20vw,30vw);}
    #vg4{box-sizing:border:box; background:url('http://ekladata.com/oez9eC_Qdlvej9FoPSFOta3nJ0Q.jpg'); background-size:cover; transform:translate(30vw,30vw);}
    #vg5{box-sizing:border:box; background:url('http://ekladata.com/BIcdJKEMbETrx6I9TkxCMQfCflU.jpg'); background-size:cover; transform:translate(40vw,30vw);}
    #vg6{box-sizing:border:box; background:url('http://ekladata.com/m3Cj1-sG9SLUfnJz9YIZmPRmYIw.jpg'); background-size:cover; transform:translate(50vw,30vw);}
    .fd{position:absolute; z-index:5; width:60vw; height:33.75vw; opacity:0; transition:all 1s linear;}
    #fd1{background:url('http://ekladata.com/t6MqmzadHFU4IxN43ZLlGS9Mdnk.jpg'); background-size:cover;}
    #fd2{background:url('http://ekladata.com/w2MmhRYvuLftXN1LgKdf5Rd6qXU.jpg'); background-size:cover;}
    #fd3{background:url('http://ekladata.com/6N-DWx5VuV-JimFOFzoRCdR2VGU.jpg'); background-size:cover;}
    #fd4{background:url('http://ekladata.com/oez9eC_Qdlvej9FoPSFOta3nJ0Q.jpg'); background-size:cover;}
    #fd5{background:url('http://ekladata.com/BIcdJKEMbETrx6I9TkxCMQfCflU.jpg'); background-size:cover;}
    #fd6{background:url('http://ekladata.com/m3Cj1-sG9SLUfnJz9YIZmPRmYIw.jpg'); background-size:cover;}
    #cc{position:absolute; z-index:1; width:8vw; background:rgba(0,0,0,0.5); font-size:1vw; color:white; text-shadow:0.1vh 0.1vh black;}
    #vg1:active ~ #fd1,#vg2:active ~ #fd2,#vg3:active ~ #fd3,#vg4:active ~ #fd4,#vg5:active ~ #fd5,#vg6:active ~ #fd6{opacity:1;}
    --></style>