Exemple 62

 1+8 images au ratio 16/9, redimensionnées par le code en 1152x648px

Le code peut semble un peu long mais 8 boutons + 8x2 images font autant de lignes. 

<div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/fLjhCu8lORvUwtDv2xDtCx6EoQs@1152x648.jpg'); background-size: cover;"><input id="rd0" type="text" value="clic" /> <input id="rd1" class="rd" type="text" /> <input id="rd2" class="rd" type="text" /> <input id="rd3" class="rd" type="text" /> <input id="rd4" class="rd" type="text" /> <input id="rd5" class="rd" type="text" /> <input id="rd6" class="rd" type="text" /> <input id="rd7" class="rd" type="text" /> <input id="rd8" class="rd" type="text" />
<p id="rid1" class="rid">&nbsp;</p>
<p id="rid1a" class="rid">&nbsp;</p>
<p id="rid2" class="rid">&nbsp;</p>
<p id="rid2a" class="rid">&nbsp;</p>
<p id="rid3" class="rid">&nbsp;</p>
<p id="rid3a" class="rid">&nbsp;</p>
<p id="rid4" class="rid">&nbsp;</p>
<p id="rid4a" class="rid">&nbsp;</p>
<p id="rid5" class="rid">&nbsp;</p>
<p id="rid5a" class="rid">&nbsp;</p>
<p id="rid6" class="rid">&nbsp;</p>
<p id="rid6a" class="rid">&nbsp;</p>
<p id="rid7" class="rid">&nbsp;</p>
<p id="rid7a" class="rid">&nbsp;</p>
<p id="rid8" class="rid">&nbsp;</p>
<p id="rid8a" class="rid">&nbsp;</p>
</div>

<style><!--
#rd0{position:absolute; z-index:1; width:4vw; background:transparent; border:none;font-size:2vw; color:white!important; text-shadow:0.1vh 0.1vh black; transform:translate(55vw,1vw);}
.rd{position:absolute; z-index:4; width:2vw; height:2vw; border-radius:50%; background:aque; box-shadow:inset -0.4vh -0.4vh 0.6vh black;}
#rd1{transform:translate(55vw,5vw);}
#rd2{transform:translate(55vw,8vw);}
#rd3{transform:translate(55vw,11vw);}
#rd4{transform:translate(55vw,14vw);}
#rd5{transform:translate(55vw,17vw);}
#rd6{transform:translate(55vw,20vw);}
#rd7{transform:translate(55vw,23vw);}
#rd8{transform:translate(55vw,26vw);}
.rid{position:absolute; z-index:5; width:0vw; height:33.75vw; background-size:60vw 33.75vw;transition:all 1s linear;}
#rid1{transform:translate(0vw,0vw); background-position:0vw 0vw; background:url('http://ekladata.com/YmxGtE33W_csqdMZUQ9rfENNnW0@1152x648.jpg');}
#rid1a{ background:url('http://ekladata.com/YmxGtE33W_csqdMZUQ9rfENNnW0@1152x648.jpg'); background-position:-60vw 0vw; transform:translate(60vw,0vw);}
#rid2{transform:translate(0vw,0vw); background-position:0vw 0vw; background:url('http://ekladata.com/OtMoAA7tYDhOTxrL7HsL7euFDhA@1152x648.jpg');}
#rid2a{background:url('http://ekladata.com/OtMoAA7tYDhOTxrL7HsL7euFDhA@1152x648.jpg'); background-position:-60vw 0vw;transform:translate(60vw,0vw); }
#rid3{transform:translate(0vw,0vw); background-position:0vw 0vw; background:url('http://ekladata.com/oAjtupADlKXsys-RCQQhPg8ZrGc@1152x648.jpg');}
#rid3a{background:url('http://ekladata.com/oAjtupADlKXsys-RCQQhPg8ZrGc@1152x648.jpg'); background-position:-60vw 0vw; transform:translate(60vw,0vw); }
#rid4{transform:translate(0vw,0vw); background-position:0vw 0vw; background:url('http://ekladata.com/6LW6zG5egQ0Oc5AlDQPYX4OPqyg@1152x648.jpg');}
#rid4a{background:url('http://ekladata.com/6LW6zG5egQ0Oc5AlDQPYX4OPqyg@1152x648.jpg'); background-position:-60vw 0vw; transform:translate(60vw,0vw); }
#rid5{transform:translate(0vw,0vw); background-position:0vw 0vw; background:url('http://ekladata.com/6QbZ-KE94Z0FOUiUflC5Efa6ey0@1152x648.jpg');}
#rid5a{background:url('http://ekladata.com/6QbZ-KE94Z0FOUiUflC5Efa6ey0@1152x648.jpg'); background-position:-60vw 0vw; transform:translate(60vw,0vw); }
#rid6{transform:translate(0vw,0vw); background-position:0vw 0vw; background:url('http://ekladata.com/XRau5xi1qtSMYhvqO9_x8u2w0FM@1152x648.jpg');}
#rid6a{background:url('http://ekladata.com/XRau5xi1qtSMYhvqO9_x8u2w0FM@1152x648.jpg'); background-position:-60vw 0vw; transform:translate(60vw,0vw); }
#rid7{transform:translate(0vw,0vw); background-position:0vw 0vw; background:url('http://ekladata.com/jBYPOsA7aT2jFGVpQgDKa-j9eso@1152x648.jpg');}
#rid7a{background:url('http://ekladata.com/jBYPOsA7aT2jFGVpQgDKa-j9eso@1152x648.jpg'); background-position:-60vw 0vw; transform:translate(60vw,0vw); }
#rid8{transform:translate(0vw,0vw); background-position:0vw 0vw; background:url('http://ekladata.com/dEtz-owcrGYBeiMWxl2C6nOJJUA@1152x648.jpg');}
#rid8a{background:url('http://ekladata.com/dEtz-owcrGYBeiMWxl2C6nOJJUA@1152x648.jpg'); background-position:-60vw 0vw; transform:translate(60vw,0vw); }
#rd1:focus ~ #rid1,#rd2:focus ~ #rid2,#rd3:focus ~ #rid3,#rd4:focus ~ #rid4,#rd5:focus ~ #rid5,#rd6:focus ~ #rid6,#rd7:focus ~ #rid7,#rd8:focus ~ #rid8{z-index:5; width:30vw;}
#rd1:focus ~ #rid1a,#rd2:focus ~ #rid2a,#rd3:focus ~ #rid3a,#rd4:focus ~ #rid4a,#rd5:focus ~ #rid5a,#rd6:focus ~ #rid6a,#rd7:focus ~ #rid7a,#rd8:focus ~ #rid8a{z-index:5; width:30vw; background-position:-30vw 0vw; transform:translate(30vw,0vw);}
--></style>