-
Plein Ecran 26
Clic boutons.
<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.4vh ridge grey; background: url('http://ekladata.com/-J3tQh8pmNv5_HmqJ-Y-ywybHzw@1152x648.jpg'); background-size: cover;"><input id="dro1" class="dro" type="button" />
<input id="dro1" class="dro" type="button" />
<input id="dro2" class="dro" type="button" />
<input id="dro3" class="dro" type="button" />
<input id="dro4" class="dro" type="button" />
<input id="dro5" class="dro" type="button" />
<input id="dro6" class="dro" type="button" />
<input id="dro7" class="dro" type="button" />
<input id="dro8" class="dro" type="button" />
<input id="dro9" class="dro" type="button" />
<p id="ind">Clic boutons.</p>
<img id="aut1" class="aut" src="http://ekladata.com/XlTGmrRQCIjbOB6a6I67RfXQNtY.jpg" alt="" />
<img id="aut2" class="aut" src="http://ekladata.com/ZkbeJUdnC4Wvbx_I4LThJzvc7B4.jpg" alt="" />
<img id="aut3" class="aut" src="http://ekladata.com/DrrP9QHlh3jB1flHKWpocBBwUWQ.jpg" alt="" />
<img id="aut4" class="aut" src="http://ekladata.com/v_CDHujDwZCIPhdYXXmIpwLIIu4.jpg" alt="" />
<img id="aut5" class="aut" src="http://ekladata.com/5RAUhOIwajXnkH-GjO8Uh_y_yqg.jpg" alt="" />
<img id="aut6" class="aut" src="http://ekladata.com/uW8ihGKVy8YH9pXRTkRE058OWo8.jpg" alt="" />
<img id="aut7" class="aut" src="http://ekladata.com/G-GsuZ-gxBlXCxmwHCBvgtFNng0.jpg" alt="" />
<img id="aut8" class="aut" src="http://ekladata.com/Qne-fKU8ZGyY3dVLmKkvczNj27g.jpg" alt="" />
<img id="aut9" class="aut" src="http://ekladata.com/N08e71WoTOwsVnBonwvGPHbDw8Y.jpg" alt="" />
</div>
<style><!--
#ind{position:absolute; z-index:1; width:20vw; text-align:center; font-size:1.5vw; color:rgba(152,102,102); text-shadow:0.1vh 0.1vh black; transform:translate(5vw,0vw);}
.dro{position:absolute; z-index:5; width:1vw; font-size:1.5vw;}
#dro1{transform:translate(57vw,2vw);}
#dro2{transform:translate(57vw,5vw);}
#dro3{transform:translate(57vw,8vw);}
#dro4{transform:translate(57vw,11vw);}
#dro5{transform:translate(57vw,14vw);}
#dro6{transform:translate(57vw,17vw);}
#dro7{transform:translate(57vw,20vw);}
#dro8{transform:translate(57vw,23vw);}
#dro9{transform:translate(57vw,26vw);}
.aut{position:absolute; z-index:100; width:0vw; height:0vw; left:50vw; background-position:50vw 0vw; transition:all 1s linear;}
#dro1:focus ~ #aut1,#dro2:focus ~ #aut2,#dro3:focus ~ #aut3,#dro4:focus ~ #aut4,#dro5:focus ~ #aut5,#dro6:focus ~ #aut6,#dro7:focus ~ #aut7,#dro8:focus ~ #aut8,#dro9:focus ~ #aut9{width:100vw; height:56.25vw; left:0; background-position:0vw 0vw;}
--></style>