• Pictures HTML cod

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