HTML COD activ picture

HTML COD Aktiv pictures

Webb-sit: http://pourquoipas732.eklablog.com/en-rond-p1187902

 <div id="aa">
<p id="a1">&nbsp;</p>
<p id="a2">&nbsp;</p>
<p id="a3">&nbsp;</p>
<p id="a4">&nbsp;</p>
<p id="a5">&nbsp;</p>
<p id="a6">&nbsp;</p>
<p id="a7">&nbsp;</p>
</div>

<style><!--
#aa{width:800px; height:600px; margin:5px auto;}
#a1{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; border:3px solid white;
box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/wRbmR_xiU8qx18ajdCmqOahTbxI/kepem001.jpg);
transition:all 1s linear; transform:translate(20px,20px); background-position:center center;}
#a2{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; border:3px solid white;
box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/xkzANGi_1JhuwDkbxEyzvc09D4s/kepem002.jpg);
transition:all 1s linear; transform:translate(120px,120px); background-position:center center;}
#a3{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; border:3px solid white;
box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/cQ43tKvWaA2raoMOdw9YnWW9y1g/kepem003.jpg);
transition:all 1s linear; transform:translate(270px,50px); background-position:center center;}
#a4{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; border:3px solid white;
box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/_eYizPnGboJCRh07YVbnd9F0FJE/kepem004.jpg);
transition:all 1s linear; transform:translate(420px,10px); background-position:center center;}
#a5{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; border:3px solid white;
box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/F9f12-LHMz4h61lEqG-O-LbQkaI/kepem005.jpg);
transition:all 1s linear; transform:translate(460px,180px); background-position:center center;}
#a6{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; border:3px solid white;
box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/MWfEkCoe_vY_MQOhQgGmdj2UEvQ/kepem006.jpg);
transition:all 1s linear; transform:translate(350px,250px); background-position:center center;}
#a7{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; border:3px solid white;
box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/c34rL6gpRn1uDtqEp8fNSriYGmM/kepem007.jpg);
transition:all 1s linear; transform:translate(160px,260px); background-position:center center;}
#a1:hover, #a2:hover, #a3:hover, #a4:hover, #a5:hover, #a6:hover, #a7:hover{z-index:10; transform:translate(0px,0px);
width:800px; height:600px; border:none; border-radius:0%;}
--></style>

**********************************************************************************