-
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"> </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>