• Plein Ecran 24


    <div style="width: 52vw; height: 31vw; margin: 1vh auto; text-align: left;"><input id="mtm1" class="mtm" type="text" /> <input id="mtm2" class="mtm" type="text" /> <input id="mtm3" class="mtm" type="text" /> <input id="mtm4" class="mtm" type="text" /> <input id="mtm5" class="mtm" type="text" /> <input id="mtm6" class="mtm" type="text" /> <input id="mtm7" class="mtm" type="text" /> <input id="mtm8" class="mtm" type="text" /> <img id="gdf1" class="gdf" src="http://ekladata.com/nvhBPlIvN1zT4Dq78qF1JslrqT0.jpg" alt="" /> <img id="gdf2" class="gdf" src="http://ekladata.com/FYgQsVDEHNSU_kvwBUjF-nWzR2o.jpg" alt="" /> <img id="gdf3" class="gdf" src="http://ekladata.com/cUXGVO6-S-wlSvyp7GQfa_zI-HE.jpg" alt="" /> <img id="gdf4" class="gdf" src="http://ekladata.com/fb1nOPqkaQmIGsFX9xCtmk6xIwA.jpg" alt="" /> <img id="gdf5" class="gdf" src="http://ekladata.com/hChlFzR-iVueujoeEWzV3kdO1QQ.jpg" alt="" /> <img id="gdf6" class="gdf" src="http://ekladata.com/9XXZEuji9wPyT8ipfRBcJM0Ssd0.jpg" alt="" /> <img id="gdf7" class="gdf" src="http://ekladata.com/VipEeMmc8Jc4ME_JJQkIknQC9IQ.jpg" alt="" /> <img id="gdf8" class="gdf" src="http://ekladata.com/RZeM-umR9s3oyduX_MxyUpaJlBI.jpg" alt="" /></div>
    <style><!--
    .mtm{position:absolute; z-index:1; width:12vw; height:12vw; border-radius:50%; box-shadow:0.4vh 0.4vh 0.6vh black;}
    #mtm1{transform:translate(1vw,1vw);background:url(http://ekladata.com/nvhBPlIvN1zT4Dq78qF1JslrqT0@230x130.jpg); background-size:cover;}
    #mtm2{transform:translate(17vw,1vw);background:url(http://ekladata.com/FYgQsVDEHNSU_kvwBUjF-nWzR2o@230x130.jpg); background-size:cover;}
    #mtm3{transform:translate(33vw,1vw);background:url(http://ekladata.com/cUXGVO6-S-wlSvyp7GQfa_zI-HE@230x130.jpg); background-size:cover;}
    #mtm4{transform:translate(9vw,8vw);background:url(http://ekladata.com/fb1nOPqkaQmIGsFX9xCtmk6xIwA@230x130.jpg); background-size:cover;}
    #mtm5{transform:translate(25vw,8vw);background:url(http://ekladata.com/hChlFzR-iVueujoeEWzV3kdO1QQ@230x130.jpg); background-size:cover;}
    #mtm6{transform:translate(1vw,15vw);background:url(http://ekladata.com/9XXZEuji9wPyT8ipfRBcJM0Ssd0@230x130.jpg); background-size:cover;}
    #mtm7{transform:translate(17vw,15vw);background:url(http://ekladata.com/VipEeMmc8Jc4ME_JJQkIknQC9IQ@230x130.jpg); background-size:cover;}
    #mtm8{transform:translate(33vw,15vw);background:url(http://ekladata.com/RZeM-umR9s3oyduX_MxyUpaJlBI@230x130.jpg); background-size:cover;}

    .gdf{position:absolute; z-index:100; width:0vw; height:0; left:50vw; transform:translate(0vw,20vw); transition:all 1s linear;}
    #mtm1:focus ~ #gdf1, #mtm2:focus ~ #gdf2,#mtm3:focus ~ #gdf3,#mtm4:focus ~ #gdf4,#mtm5:focus ~ #gdf5,#mtm6:focus ~ #gdf6,#mtm7:focus ~ #gdf7,#mtm8:focus ~ #gdf8{left:0; width:100vw; height:56.25vw; transform:translate(0vw,0vw);}
    --></style>