html - How can I align an image with css -

i have code: jsfiddle

<div id="picture1">     <a href="http://www.google.com" target="_blank"><img src="http://farm4.staticflickr.com/    3780/9455263123_9150ae4a6e_o.png" /></a> </div>   <div id="picture2">     <a href="http://www.google.com" target="_blank"><img src="http://farm6.staticflickr.com/   5483/9458043690_5bce524ccf_o.png" /></a> </div> 

and css

    #picture1        {      top:-10px;    left: 190px;    right: auto;     float:right; }   #picture2        {      top:-10px;    left: 50px;    right: auto;     float:left; }  img {     position:relative;     top:-10px;     -webkit-transition: 0.5s;     -moz-transition: 0.5s;     -ms-transition: 0.5s;     -o-transition: 0.5s;     transition: 0.5s;  } 

i want images stay side side, overlapping. web site example

how can this? want insert images , place them designed in background.

for simple background image, , have insert 2 guitars transition effects, can't figure out.

you can use positioning , z-index controls such these:

#pic { z-index:100; position: absolute; top:0; left:0; } #pic2 { z-index:999; position: absolute; top:0; left:100px; } 

by applying these id's 2 seperate images can there desired results, mess transistions , you'll need png's good.