Une présentation.

Une présentation pour 12 images, au format 60vw/33.75vw, ratio 16/9.
On peut ajouter ou retirer des images qui, afin de ne pas être trop lourdes, seront dimensionnées au plus près de la taille publiée (ici 1152px par 649px).

<div style="width: 60vw; height: 33.75vw; margin: 0.2vw auto; border: 0.1vh solid black; background: url('http://ekladata.com/vR2qHVSsUxc8O5Fp_MNHxXpE4X0/back.jpg');"><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" />
<p id="ex">Le survol de chaque vignette l'agrandit.<br /><br />Le clic sur chaque bouton change les 4 images.</p>
<p id="x1" class="yy">&nbsp;</p>
<p id="x2" class="yy">&nbsp;</p>
<p id="x3" class="yy">&nbsp;</p>
<p id="x4" class="yy">&nbsp;</p>
</div>
<style><!--
.bt{position:absolute; z-index:5; width:2vw; height:2vw; text-align:center; line-height:2vw; font-size:1.5vw; background:none;}
#bt1{transform:translate(57vw,1vw);}
#bt2{transform:translate(57vw,5vw);}
#bt3{transform:translate(57vw,9vw);}
#ex{position:absolute; z-index:1; width:10vw; height:15vw; text-align:center; font-size:1vw; transform:translate(23vw,5vw);}
.yy{position:absolute; z-index:1; width:20vw; height:11.5vw; transition:all 1s linear;}
#x1{transform:translate(2vw,4vw); background:url('http://ekladata.com/ZiAz1NW2DXX_wAEoS_0ca9WmhC0.jpg'); background-size:cover;}
#x2{transform:translate(36vw,4vw); background:url('http://ekladata.com/jdLuW9iTmoopW-IeFbcODGcXeZc.jpg'); background-size:cover;}
#x3{transform:translate(2vw,19vw); background:url('http://ekladata.com/MBcG76aGUi-CQcDDZjlNgtMlxuI.jpg'); background-size:cover;}
#x4{transform:translate(36vw,19vw); background:url('http://ekladata.com/9f6ZzvgXrb-HI5hde6RgPgGMrl4.jpg'); background-size:cover;}
#x1:hover,#x2:hover,#x3:hover,#x4:hover{z-index:3; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
#bt2:focus ~ #x1{background:url('http://ekladata.com/B-nC6CIjR8dmF99_YUUi2pJDddw.jpg');background-size:cover;}
#bt2:focus ~ #x2{background:url('http://ekladata.com/E0wkLcbIgJsevBOUEPt1uvIdOeQ.jpg');background-size:cover;}
#bt2:focus ~ #x3{background:url('http://ekladata.com/I5zJvxDQnzEDMR4rbW-hq1uwFWw.jpg');background-size:cover;}
#bt2:focus ~ #x4{background:url('http://ekladata.com/Ih29LPZSLYLbSOYAAYkleoV2xO8.jpg');background-size:cover;}
#bt3:focus ~ #x1{background:url('http://ekladata.com/OQy07Z_2ioP-wpO4d03a23UdF-k.jpg');background-size:cover;}
#bt3:focus ~ #x2{background:url('http://ekladata.com/sXRffqbUHWw-DhPICs6MEZqARcI.jpg');background-size:cover;}
#bt3:focus ~ #x3{background:url('http://ekladata.com/UpdY2NjAjL2XtgUDQ3GRfGfwJeI.jpg');background-size:cover;}
#bt3:focus ~ #x4{background:url('http://ekladata.com/81Zw4katWGkVKr4U75ZrAOKf0ks.jpg');background-size:cover;}
--></style>