• Comparatif BK position

    Version où la vignette affiche la portion de la grande image selon sa position et s'agrandit au clic,à partir de cette portion; second clic pour retour.

    Attention: dans le code, les valeurs du positionnement de l'image (background-position) sont les mêmes que celles du positionnement (transform:translate();) mais en négatif.

     


    <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:60vw 33.75vw; background-position:-0.5vw -1vw;}
    #s2{transform:translate(0.5vw,12vw); background:url('http://ekladata.com/_OGjI2fHR_0BRwWr1Yu7eVgFv5U.jpg'); background-size:60vw 33.75vw; background-position:-0.5vw -12vw;}
    #s3{transform:translate(0.5vw,23vw); background:url('http://ekladata.com/JCMTbivABhJx1REE8qWJZDbm4KU.jpg'); background-size:60vw 33.75vw; background-position:-0.5vw -23vw;}
    #s4{transform:translate(43vw,1vw); background:url('http://ekladata.com/68oyLZC0SX30P3YSIZ4g1-hHxio.jpg'); background-size:60vw 33.75vw; background-position:-43vw -1vw;}
    #s5{transform:translate(43vw,12vw); background:url('http://ekladata.com/yGmAVcW1K9446aVyFZPXMxARzW0.jpg'); background-size:60vw 33.75vw; background-position:-43vw -12vw;}
    #s6{transform:translate(43vw,23vw); background:url('http://ekladata.com/R6jkLFHrCU4MdksV5mEfUdWQdqA.jpg'); background-size:60vw 33.75vw; background-position:-43vw -23vw;}

    #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); background-position:0vw 0vw;}
    #s1:focus ~ #q1,#s2:focus ~ #q1,#s3:focus ~ #q1,#s4:focus ~ #q1,#s5:focus ~ #q1,#s6:focus ~ #q1{z-index:20;}
    --></style>