Clic dernière

6 images au ratio 16/9 dans un montage en 1200x675px. 

<div style="width: 1200px; height: 675px; border: 6px ridge grey; margin: 50px auto; text-align: left; background: url('http://ekladata.com/vR2qHVSsUxc8O5Fp_MNHxXpE4X0/back.jpg');"><input id="dim1" class="dim" src="http://ekladata.com/BwYEx9GyHNHfwmtuqGjmiGg3jlM.jpg" type="image" /> <input id="dim2" class="dim" src="http://ekladata.com/ZdHLupLnfpe0WrEu1kru2at3bdk.jpg" type="image" /> <input id="dim3" class="dim" src="http://ekladata.com/wE3qCUZraR5-Gh3rPU2TNUt-1No.jpg" type="image" /> <input id="dim4" class="dim" src="http://ekladata.com/q_34DOSabVwhHj2VgG6eoGxel4I.jpg" type="image" /> <input id="dim5" class="dim" src="http://ekladata.com/hArTtANQiKBNmhgDynXjadFlsQA.jpg" type="image" /> <input id="dim6" class="dim" src="http://ekladata.com/TrXzEw6NckkbncfsZXWecY_Uz0c.jpg" type="image" />
<p id="jk">&nbsp;</p>
<p id="jf">Clic pour agrandir puis clic pour r&eacute;duire.</p>
</div>
<style><!--
.dim{position:absolute; z-index:2; width:480px; height:270px; border:6px solid white; transition:all 1s;}
#dim1{box-sizing:border-box; transform:translate(50px,100px) rotate(10deg);}
#dim2{box-sizing:border-box; transform:translate(50px,300px) rotate(-10deg);}
#dim3{box-sizing:border-box; transform:translate(650px,100px) rotate(-10deg);}
#dim4{box-sizing:border-box; transform:translate(650px,300px) rotate(10deg);}
#dim5{box-sizing:border-box; transform:translate(80px,200px) rotate(70deg);}
#dim6{box-sizing:border-box; transform:translate(670px,220px) rotate(-70deg);}
#jk{position:absolute; z-index:1; width:1200px; height:675px;}
#jf{position:absolute; z-index:1; width:800px; font-size:22px; color:brown; text-shadow:2px 2px black; transform:translate(400px,20px);}
#dim1:focus ~ #jk,#dim2:focus ~ #jk,#dim3:focus ~ #jk,#dim4:focus ~ #jk,#dim5:focus ~ #jk,#dim6:focus ~ #jk{z-index:10;}
#dim1:focus,#dim2:focus,#dim3:focus,#dim4:focus,#dim5:focus,#dim6:focus{z-index:8; width:1200px; height:675px; transform:translate(0px,0px) rotate(0deg);}
--></style>