Clic dernière

<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>

 

Clic pour agrandir puis clic pour réduire.