• Plein Ecran 23

    Clic vignette pour ouvrir; clic image pour fermer.

    <div style="width: 52vw; height: 31vw; border: 0.1vh solid black; background: white; margin: 1vh auto; text-align: left;"><input id="pys1" class="pys" type="text" /> <input id="pys2" class="pys" type="text" /> <input id="pys3" class="pys" type="text" /> <input id="pys4" class="pys" type="text" /> <input id="pys5" class="pys" type="text" /> <input id="pys6" class="pys" type="text" /> <input id="pys7" class="pys" type="text" /> <input id="pys8" class="pys" type="text" /> <input id="pys9" class="pys" type="text" /> <img id="gf1" class="gf" src="http://ekladata.com/GAu68xX-I1Q-Plc2nqQuf3UFfa8.jpg" alt="" /> <img id="gf2" class="gf" src="http://ekladata.com/ScUzxLXXh52dc6TpdSNdjJmPwCU.jpg" alt="" /> <img id="gf3" class="gf" src="http://ekladata.com/qrmBqbk4N0dCuiwdFZgO3fdykn0.jpg" alt="" /> <img id="gf4" class="gf" src="http://ekladata.com/COsw7QbRDt0_MkE75i-XOxWK1tw.jpg" alt="" /> <img id="gf5" class="gf" src="http://ekladata.com/JLz15KioIRyDW-IeaAy1hvoaciI.jpg" alt="" /> <img id="gf6" class="gf" src="http://ekladata.com/svJc7QZWI2Ww_jSMo99S-JMNKoE.jpg" alt="" /> <img id="gf7" class="gf" src="http://ekladata.com/nE75gWi1R1lb6W_5XZZaU8D4JK0.jpg" alt="" /> <img id="gf8" class="gf" src="http://ekladata.com/MunqBEu3_aIx9VLqF3mJHdqNaQY.jpg" alt="" /> <img id="gf9" class="gf" src="http://ekladata.com/6oQkn3qR0Kb0jjp4Kpk_Zt-u0aM.jpg" alt="" /></div>

    <style><!--
    .pys{position:absolute; z-index:1; width:16vw; height:9vw;}
    #pys1{transform:translate(1vw,1vw);background:url(http://ekladata.com/GAu68xX-I1Q-Plc2nqQuf3UFfa8@307x173.jpg);}
    #pys2{transform:translate(18vw,1vw);background:url(http://ekladata.com/ScUzxLXXh52dc6TpdSNdjJmPwCU@307x173.jpg);}
    #pys3{transform:translate(35vw,1vw);background:url(http://ekladata.com/qrmBqbk4N0dCuiwdFZgO3fdykn0@307x173.jpg);}
    #pys4{transform:translate(1vw,11vw);background:url(http://ekladata.com/COsw7QbRDt0_MkE75i-XOxWK1tw@307x173.jpg);}
    #pys5{transform:translate(18vw,11vw);background:url(http://ekladata.com/JLz15KioIRyDW-IeaAy1hvoaciI@307x173.jpg);}
    #pys6{transform:translate(35vw,11vw);background:url(http://ekladata.com/svJc7QZWI2Ww_jSMo99S-JMNKoE@307x173.jpg);}
    #pys7{transform:translate(1vw,21vw);background:url(http://ekladata.com/nE75gWi1R1lb6W_5XZZaU8D4JK0@307x173.jpg);}
    #pys8{transform:translate(18vw,21vw);background:url(http://ekladata.com/MunqBEu3_aIx9VLqF3mJHdqNaQY@307x173.jpg);}
    #pys9{transform:translate(35vw,21vw);background:url(http://ekladata.com/6oQkn3qR0Kb0jjp4Kpk_Zt-u0aM@307x173.jpg);}
    .gf{position:absolute; z-index:100; width:0vw; height:0; left:50vw; transform:translate(0vw,28vw); transition:all 1s linear;}
    #pys1:focus ~ #gf1, #pys2:focus ~ #gf2,#pys3:focus ~ #gf3,#pys4:focus ~ #gf4,#pys5:focus ~ #gf5,#pys6:focus ~ #gf6,#pys7:focus ~ #gf7,#pys8:focus ~ #gf8,#pys9:focus ~ #gf9{left:0; width:100vw; height:56.25vw; transform:translate(0vw,0vw);}
    --></style>