• 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>