Plein Ecran 21

Clic sur chaque bouton

 

<p>Clic sur chaque bouton</p>
<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge grey; text-align: left;">
<p id="fd">&nbsp;</p>
<input id="zone1" class="imgfd" type="text" /> <input id="zone2" class="imgfd" type="text" /> <input id="zone3" class="imgfd" type="text" /> <input id="zone4" class="imgfd" type="text" /> <input id="zone5" class="imgfd" type="text" /> <input id="zone6" class="imgfd" type="text" /> <input id="zone7" class="imgfd" type="text" /> <input id="zone8" class="imgfd" type="text" /> <img id="mig1" class="mig" src="http://ekladata.com/8HuFV_ALb-CIrS7Ym615ABQ_XGg.jpg" alt="" /> <img id="mig2" class="mig" src="http://ekladata.com/XunXxMcQ5aM_oQOIPg5uohwAp-o.jpg" alt="" /> <img id="mig3" class="mig" src="http://ekladata.com/R1S_utcOcMuH3gjcGzFObb9PJJI.jpg" alt="" /> <img id="mig4" class="mig" src="http://ekladata.com/tK71E2gGZxpdZnVHOdtdxUtjUNs.jpg" alt="" /> <img id="mig5" class="mig" src="http://ekladata.com/EoqJl3sEA_CnrB3klZ4OTK8xchw.jpg" alt="" /> <img id="mig6" class="mig" src="http://ekladata.com/N_duUA3dc2Myokkw0OrAbpvUxFk.jpg" alt="" /> <img id="mig7" class="mig" src="http://ekladata.com/bFXSCiRtZx2cDuu82L-4D2zslWg.jpg" alt="" /> <img id="mig8" class="mig" src="http://ekladata.com/ch97BVEeQAYo59Yrw1LoWH8F_HQ.jpg" alt="" /></div>
<style><!--
.imgfd{position:absolute; z-index:5; width:8vw; height:4.5vw; border-radius:2vw; box-shadow:inset -0.4vh -0.4vh 0.6vh black,inset 0.4vh 0.4vh 0.6vh white; background:url('http://ekladata.com/ANqA85yhTJw1NUOQWcbKDf2bPMs@1152x648.jpg'); background-size:60vw 33.75vw;}
#fd{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/ANqA85yhTJw1NUOQWcbKDf2bPMs@1152x648.jpg'); background-size:60vw 33.75vw; filter:grayscale(1); -webkit-filter:grayscale(1); opacity:0.7;}
#zone1{transform:translate(5vw,3vw); background-position:-5vw -3vw;}
#zone2{transform:translate(5vw,11vw); background-position:-5vw -11vw;}
#zone3{transform:translate(5vw,19vw); background-position:-5vw -19vw;}
#zone4{transform:translate(5vw,27vw); background-position:-5vw -27vw;}
#zone5{transform:translate(15vw,27vw); background-position:-15vw -27vw;}
#zone6{transform:translate(25vw,27vw); background-position:-25vw -27vw;}
#zone7{transform:translate(35vw,27vw); background-position:-35vw -27vw;}
#zone8{transform:translate(45vw,27vw); background-position:-45vw -27vw;}
.mig{position:absolute; z-index:100; width:100vw; height:0vw;left:0; transition:all 1s linear;}
#zone1:focus ~ #mig1,#zone2:focus ~ #mig2,#zone3:focus ~ #mig3,#zone4:focus ~ #mig4,#zone5:focus ~ #mig5,#zone6:focus ~ #mig6,#zone7:focus ~ #mig7,#zone8:focus ~ #mig8{height:56.25vw;}
--></style>