Art.22A.5.21

Une variante.

Clic maintenu

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/0XYQMloCbRTd3vP0Gbly4tFJPpE.jpg'); background-size: cover;">
<p id="rata">Clic maintenu</p>
<img id="jara1" class="jara" src="http://ekladata.com/rzOhxdCzgADT033gkUbhM-9XHTw.jpg" alt="" />
<img id="jara2" class="jara" src="http://ekladata.com/RNHHx78MRdUUqqO0QosDtroRODE.jpg" alt="" />
<img id="jara3" class="jara" src="http://ekladata.com/p8eIPtjiXm0S6vQJNTBpP2ygAxo.jpg" alt="" />
<img id="jara4" class="jara" src="http://ekladata.com/C2O48ZU_qxk-Ol464F843XDftBc.jpg" alt="" /></div>
<style><!--
#rata{position:absolute; z-index:1; width:200px; height:562px; background:rgba(255,255,255,0.5); transform:translate(800px,0px); text-align:center; font-size:25px; color:white; text-shadow:2px 2px black;}
.jara{position:absolute; z-index:1; width:100px; height:100px; border-radius:50%; border:3px solid white; box-shadow:-4px -4px 6px black; transition:all 1.5s;}
#jara1{box-sizing:border-box; transform:translate(850px,50px) rotatey(180deg);}
#jara2{box-sizing:border-box; transform:translate(850px,170px) rotatey(180deg);}
#jara3{box-sizing:border-box; transform:translate(850px,290px) rotatey(180deg);}
#jara4{box-sizing:border-box; transform:translate(850px,410px) rotatey(180deg);}
#jara1:active,#jara2:active,#jara3:active,#jara4:active{z-index:5; width:1000px; height:562px; border-radius:0%; transform:translate(0px,0px) rotatey(0deg);box-shadow:none;}
--></style>