Exemple 41

 8 + 1 images au ratio 16/9. Clic

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; text-align: left; margin: 1vh auto; background: url('http://ekladata.com/YixXWjSNvSHW2vXybKMPOq5TH9s.jpg'); background-size: cover;"><input id="ov1" class="ov" src="http://ekladata.com/7sv_aLiBxTpLxUQCnmRHvRTWeCg@154x86.jpg" type="image" /> <img id="ent1" class="ent" src="http://ekladata.com/7sv_aLiBxTpLxUQCnmRHvRTWeCg.jpg" alt="" />
<input id="ov2" class="ov" src="http://ekladata.com/8eUVb_msOOvQBSU2t4ZlFn70ERg@154x86.jpg" type="image" /> <img id="ent2" class="ent" src="http://ekladata.com/8eUVb_msOOvQBSU2t4ZlFn70ERg.jpg" alt="" />
<input id="ov3" class="ov" src="http://ekladata.com/4NCja3iuuLtIPtHMXkLlTgBNjdw@154x86.jpg" type="image" /> <img id="ent3" class="ent" src="http://ekladata.com/4NCja3iuuLtIPtHMXkLlTgBNjdw.jpg" alt="" />
<input id="ov4" class="ov" src="http://ekladata.com/USql-Xgaix5_ZGH5DNerESqP-s4@154x86.jpg" type="image" /> <img id="ent4" class="ent" src="http://ekladata.com/USql-Xgaix5_ZGH5DNerESqP-s4.jpg" alt="" />
<input id="ov5" class="ov" src="http://ekladata.com/S4_vdj1ntE5i3dxkWXYQ0UrTxQ0@154x86.jpg" type="image" /> <img id="ent5" class="ent" src="http://ekladata.com/S4_vdj1ntE5i3dxkWXYQ0UrTxQ0.jpg" alt="" />
<input id="ov6" class="ov" src="http://ekladata.com/Kg0-xlMjJY_y23DxeBEJmJjKNVo@154x86.jpg" type="image" /> <img id="ent6" class="ent" src="http://ekladata.com/Kg0-xlMjJY_y23DxeBEJmJjKNVo.jpg" alt="" />
<input id="ov7" class="ov" src="http://ekladata.com/Vo9kJMfwytZjme0ofs5yzAR0ETI@154x86.jpg" type="image" /> <img id="ent7" class="ent" src="http://ekladata.com/Vo9kJMfwytZjme0ofs5yzAR0ETI.jpg" alt="" />
<input id="ov8" class="ov" src="http://ekladata.com/feDa5SMsM-Fg8eqgQQdj07ihMPs@154x86.jpg" type="image" /> <img id="ent8" class="ent" src="http://ekladata.com/feDa5SMsM-Fg8eqgQQdj07ihMPs.jpg" alt="" /></div>
<style><!--
.ov{position:absolute; z-index:2; width:12vw; height:6.75vw; border-radius:50%; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.8vh black; }
#ov1{transform:translate(5vw,2vw);}
#ov2{transform:translate(2vw,13vw);}
#ov3{transform:translate(5vw,24vw);}
#ov4{transform:translate(24vw,1vw);}
#ov5{transform:translate(43vw,2vw);}
#ov6{transform:translate(46vw,13vw);}
#ov7{transform:translate(43vw,24vw);}
#ov8{transform:translate(24vw,25vw);}

.ent{position:absolute; z-index:100; width:0vw; height:0vw; top:25vw; left:50vw; opacity:0; transition:all 1s linear;}
#ov1:focus ~ #ent1,#ov2:focus ~ #ent2,#ov3:focus ~ #ent3,#ov4:focus ~ #ent4,#ov5:focus ~ #ent5,#ov6:focus ~ #ent6,#ov7:focus ~ #ent7,#ov8:focus ~ #ent8{width:100vw; height:56.25vw; top:10vw; left:0vw; opacity:1;}
--></style>