• Comparatif BK cover

    Je vous propose 2 pages avec les mêmes images et sous la même forme: la différence est dans le fond des vignettes:

    Dans celui-ci, l'image est ici réduite au format de la vignette.

    Dans la seconde, la vignette sera remplie avec la portion de l'image correspondant à sa position dans le montage.

    Vous choisirez ainsi le code que vous préférez: clic sur chaque vignette puis clic pour retour.

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.2vh solid white; margin: 0 auto; background: url('http://ekladata.com/hwWvsC0-ODayYuMILoKE3RL95-s.jpg'); background-size: cover;"><input id="s1" class="s" type="text" /><input id="s2" class="s" type="text" /><input id="s3" class="s" type="text" /><input id="s4" class="s" type="text" /><input id="s5" class="s" type="text" /><input id="s6" class="s" type="text" />
    <p id="q1">&nbsp;</p>
    </div>

    <style><!--
    .s{position:absolute; z-index:2; width:16vw; height:9vw; opacity:0.5; transition:all 1s linear;}
    #s1{transform:translate(0.5vw,1vw); background:url('http://ekladata.com/8xyGZY086rioRsd6rU9uwgb3ZHg.jpg'); background-size:cover;}
    #s2{transform:translate(0.5vw,12vw); background:url('http://ekladata.com/_OGjI2fHR_0BRwWr1Yu7eVgFv5U.jpg'); background-size:cover;}
    #s3{transform:translate(0.5vw,23vw); background:url('http://ekladata.com/JCMTbivABhJx1REE8qWJZDbm4KU.jpg'); background-size:cover;}
    #s4{transform:translate(43vw,1vw); background:url('http://ekladata.com/68oyLZC0SX30P3YSIZ4g1-hHxio.jpg'); background-size:cover;}
    #s5{transform:translate(43vw,12vw); background:url('http://ekladata.com/yGmAVcW1K9446aVyFZPXMxARzW0.jpg'); background-size:cover;}
    #s6{transform:translate(43vw,23vw); background:url('http://ekladata.com/R6jkLFHrCU4MdksV5mEfUdWQdqA.jpg'); background-size:cover;}

    #q1{position:absolute; z-index:1; width:60vw; height:33.75vw;}
    #s1:focus,#s2:focus,#s3:focus,#s4:focus,#s5:focus,#s6:focus{z-index:10; width:60vw; height:33.75vw; border:none; opacity:1; transform:translate(0vw,0vw);}
    #s1:focus ~ #q1,#s2:focus ~ #q1,#s3:focus ~ #q1,#s4:focus ~ #q1,#s5:focus ~ #q1,#s6:focus ~ #q1{z-index:20;}
    --></style>