• Art.9.6.21

    8 images au ratio 16/9.


    <div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 4px ridge white; box-shadow: 4px 4px 6px black; background: url('http://ekladata.com/8B4uoQJhXRRZ-MBiWLgRWUVtPvU@1000x562.jpg'); background-size: cover;"><input id="tem0" type="text" value="Clic maintenu" /> <input id="tem1" class="tem" type="text" /> <input id="tem2" class="tem" type="text" /> <input id="tem3" class="tem" type="text" /> <input id="tem4" class="tem" type="text" /> <input id="tem5" class="tem" type="text" /> <input id="tem6" class="tem" type="text" /> <input id="tem7" class="tem" type="text" /> <img id="mon1" class="mon" src="http://ekladata.com/BNqu9P7RyONlsBZC30r7z7m-bUk@1000x562.jpg" alt="" /> <img id="mon2" class="mon" src="http://ekladata.com/7oGLN2UgPBm5YVwhuLHEtOESGu8@1000x562.jpg" alt="" /> <img id="mon3" class="mon" src="http://ekladata.com/PCMN_NcuZRIMBmVxdh0RbTu3pDs@1000x562.jpg" alt="" /> <img id="mon4" class="mon" src="http://ekladata.com/J8GijbHmn7dka1OSL9B3IWUIlQ8@1000x562.jpg" alt="" /> <img id="mon5" class="mon" src="http://ekladata.com/qStEVN6EBudsWEd8TRCqe3UJbbA@1000x562.jpg" alt="" /> <img id="mon6" class="mon" src="http://ekladata.com/C8hyJO2VFCbZjUMtcadKTekFfis@1000x562.jpg" alt="" /> <img id="mon7" class="mon" src="http://ekladata.com/ae0nL6kcq3ZLb6yFzmyFkzUmU7A@1000x562.jpg" alt="" /></div>
    <style><!--
    #tem0{position:absolute; z-index:1; width:200px; text-align:center; line-height:30px; font-size:25px; transform:translate(780px,20px); background:rgba(255,255,255,0.5);}
    .tem{position:absolute; z-index:3; width:30px; height:30px; border-radius:50%; border:none; background:pink; box-shadow:inset 2px 2px 4px black;}
    #tem1{transform:translate(950px,100px);}
    #tem2{transform:translate(950px,150px);}
    #tem3{transform:translate(950px,200px);}
    #tem4{transform:translate(950px,250px);}
    #tem5{transform:translate(950px,300px);}
    #tem6{transform:translate(950px,350px);}
    #tem7{transform:translate(950px,400px);}
    .tem:focus{background:lime;}
    .mon{position:absolute; z-index:5; width:320px; height:180px; border:6px ridge white; margin:0px 0px; transform:translate(-800px,235px); transition:all 1s 1s, margin 1s 1s, transform 1s 0s;}
    #mon1,#mon2,#mon3,#mon4,#mon5,#mon6,#mon7{box-sizing:border-box;}
    #tem1:active ~ #mon1,#tem2:active ~ #mon2,#tem3:active ~ #mon3,#tem4:active ~ #mon4,#tem5:active ~ #mon5,#tem6:active ~ #mon6,#tem7:active ~ #mon7{width:1000px; height:562px; transform:translate(340px, 191px); margin: -191px 0 0 -340px;}
    --></style>