Clic/Survol var1

10 images "verticales", ratio 16/9 soit 365px de large par 648 px de haut.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh solid black; margin: 2vh auto; background: url('http://ekladata.com/ku-6ewMoLGv750LjIVztqLIpjao@1152x648.jpg'); background-size: 60vw 33.75vw;"><input id="bt1" class="bt" type="text" value="A" /><input id="bt2" class="bt" type="text" value="B" /><input id="bt3" class="bt" type="text" value="C" /><input id="bt4" class="bt" type="text" value="D" /><input id="bt5" class="bt" type="text" value="E" /><input id="bt6" class="bt" type="text" value="F" /><input id="bt7" class="bt" type="text" value="G" /><input id="bt8" class="bt" type="text" value="H" /><input id="bt9" class="bt" type="text" value="I" /><input id="bt10" class="bt" type="text" value="J" />
<p id="cs1" class="cs">A</p>
<p id="cs2" class="cs">B</p>
<p id="cs3" class="cs">C</p>
<p id="cs4" class="cs">D</p>
<p id="cs5" class="cs">E</p>
<p id="cs6" class="cs">F</p>
<p id="cs7" class="cs">G</p>
<p id="cs8" class="cs">H</p>
<p id="cs9" class="cs">I</p>
<p id="cs10" class="cs">J</p>
<p id="cc">Clic sur chaque bouton pour centrer une image puis survol de l'image pour l'agrandir.</p>
</div>

<style><!--
.bt{position:absolute; z-index:5; width:1.5vw; height:1.5vw; border-radius:50%; text-align:center; font-size:1.5vw;}
#bt1{transform:translate(57vw,1vw);}
#bt2{transform:translate(57vw,4vw);}
#bt3{transform:translate(57vw,7vw);}
#bt4{transform:translate(57vw,10vw);}
#bt5{transform:translate(57vw,13vw);}
#bt6{transform:translate(57vw,16vw);}
#bt7{transform:translate(57vw,19vw);}
#bt8{transform:translate(57vw,22vw);}
#bt9{transform:translate(57vw,25vw);}
#bt10{transform:translate(57vw,28vw);}
.cs{position:absolute; z-index:1; width:7vw; height:7vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; border-radius:50%; background-size:19vw 33.8vw; font-size:1.5vw; color:white; text-align:center;transition:all 1s linear;}
#cs1{background:url('http://ekladata.com/dVli0HRJI-B_omu2YPdmnPY0yTM.jpg'); background-position:50% 50%; transform:translate(1vw,1vw);}
#cs2{background:url('http://ekladata.com/kiZIurZwvBW2RvCPU1nkU4YDGi8.jpg'); background-position:50% 50%; transform:translate(6vw,3vw);}
#cs3{background:url('http://ekladata.com/wsy7PfQmG9MZam4A0puejGyfgaE.jpg'); background-position:50% 50%; transform:translate(11vw,5vw);}
#cs4{background:url('http://ekladata.com/lvmr3j5zbyxX-9ob-yEZDuEHbzI.jpg'); background-position:50% 50%; transform:translate(6vw,8vw);}
#cs5{background:url('http://ekladata.com/tu0Q_Wxb0yRl9kG46zmZYe3JSxU.jpg'); background-position:50% 50%; transform:translate(1vw,10vw);}
#cs6{background:url('http://ekladata.com/75ur4QbFeXOrcf4mCAgTA0ZyrUY.jpg'); background-position:50% 50%; transform:translate(6vw,12vw);}
#cs7{background:url('http://ekladata.com/POe7QWBs5jnZO2_BD5mhyJHHYrY.jpg'); background-position:50% 50%; transform:translate(11vw,15vw);}
#cs8{background:url('http://ekladata.com/PlykzyGIid1N8TSHFCbFYNUneo8.jpg'); background-position:50% 50%; transform:translate(6vw,17vw);}
#cs9{background:url('http://ekladata.com/U1tZB3uFyl5_F574X1NnaQlZTqQ.jpg'); background-position:50% 50%; transform:translate(1vw,19vw);}
#cs10{background:url('http://ekladata.com/GfdpPSmB20mnOPG5BT9EQvjlKwU.jpg'); background-position:50% 50%; transform:translate(6vw,22vw);}
#cc{position:absolute; z-index:1; width:19vw; height:12vw; transform:translate(20vw,10vw); text-align:center; font-size:1.5vw; background:rgba(255,255,255,0.5);}
.bt:focus{background:lime;}
#bt1:focus ~ #cs1,#bt2:focus ~ #cs2,#bt3:focus ~ #cs3,#bt4:focus ~ #cs4,#bt5:focus ~ #cs5,#bt6:focus ~ #cs6,#bt7:focus ~ #cs7,#bt8:focus ~ #cs8,#bt9:focus ~ #cs9,#bt10:focus ~ #cs10{z-index:3; transform:translate(25.5vw,13.25vw);}
#bt1:focus ~ #cs1:hover,#bt2:focus ~ #cs2:hover,#bt3:focus ~ #cs3:hover,#bt4:focus ~ #cs4:hover,#bt5:focus ~ #cs5:hover,#bt6:focus ~ #cs6:hover,#bt7:focus ~ #cs7:hover,#bt8:focus ~ #cs8:hover,#bt9:focus ~ #cs9:hover,#bt10:focus ~ #cs10:hover{width:19vw; height:33.75vw; border-radius:0%; border:none; transform:translate(20vw,0vw);}
--></style>