• Montage 13 clic

    Commande au clic: focus, ce qui oblige à placer les vignettes dans un input et non dans un paragraphe (p)

     

     

     

     

     

     

    Clic

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: url('http://ekladata.com/wjXxOEkPZAJ_INUdsqO8EFkNl6w.jpg'); background-size: cover;"><input id="vg1" class="vg" type="text" /> <input id="vg2" class="vg" type="text" /> <input id="vg3" class="vg" type="text" /> <input id="vg4" class="vg" type="text" /> <input id="vg5" class="vg" type="text" /> <input id="vg6" class="vg" type="text" />
    <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</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/LfoomNP083zvMazktR4y-IjBVaU.jpg'); background-size:cover; transform:translate(1vw,30vw);}
    #vg2{box-sizing:border:box; background:url('http://ekladata.com/PWfvzPoCnQz8WRSxWAnHebHQyfo.jpg'); background-size:cover; transform:translate(10vw,30vw);}
    #vg3{box-sizing:border:box; background:url('http://ekladata.com/ewSbs2Qrpjnym7jf8dGdCHFjo0o.jpg'); background-size:cover; transform:translate(20vw,30vw);}
    #vg4{box-sizing:border:box; background:url('http://ekladata.com/gjOQpkBzJRTVhWpAGDk1ERjB8Mg.jpg'); background-size:cover; transform:translate(30vw,30vw);}
    #vg5{box-sizing:border:box; background:url('http://ekladata.com/7KCfV1-rMB_8HgIp2afCEA8KSQE.jpg'); background-size:cover; transform:translate(40vw,30vw);}
    #vg6{box-sizing:border:box; background:url('http://ekladata.com/Jq8zWnoEmRjbGoIcwNLMVsPAOl4.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/LfoomNP083zvMazktR4y-IjBVaU.jpg'); background-size:cover;}
    #fd2{background:url('http://ekladata.com/PWfvzPoCnQz8WRSxWAnHebHQyfo.jpg'); background-size:cover;}
    #fd3{background:url('http://ekladata.com/ewSbs2Qrpjnym7jf8dGdCHFjo0o.jpg'); background-size:cover;}
    #fd4{background:url('http://ekladata.com/gjOQpkBzJRTVhWpAGDk1ERjB8Mg.jpg'); background-size:cover;}
    #fd5{background:url('http://ekladata.com/7KCfV1-rMB_8HgIp2afCEA8KSQE.jpg'); background-size:cover;}
    #fd6{background:url('http://ekladata.com/Jq8zWnoEmRjbGoIcwNLMVsPAOl4.jpg'); background-size:cover;}
    #cc{position:absolute; z-index:1; width:3vw; background:rgba(0,0,0,0.5); font-size:1.2vw; color:white; text-shadow:0.1vh 0.1vh black;}
    #vg1:focus ~ #fd1,#vg2:focus ~ #fd2,#vg3:focus ~ #fd3,#vg4:focus ~ #fd4,#vg5:focus ~ #fd5,#vg6:focus ~ #fd6{opacity:1;}
    --></style>