css social image over image

Question

how i can put an image over image? for e.g. a social image over header image.

code:

<div>
  <img src="http://img2.wikia.nocookie.net/__cb20100409185740/gtawiki/images/e/e7/Fort_carsonn.jpg" width="1200" height="300" />
</div>
<div>
  <img src="http://i12.photobucket.com/albums/a230/buetforasif/FortCarson_ataglance.jpg" width="1200" height="300" />
</div>

<a href="https://www.facebook.com/lordgaming3?fref=ts"> <img src="img/fb.png" style="padding-left: 10px; padding-top:8px" width="30" height="30" /></a>

i want to put it on the top-left.. any idea? background-image is a wrong idea, because my silder script uses divs and images..

Set the top and left and z-index accordingly of the div – Raab Aug 07 '14 at 21:12 — Raab, Aug 07 '14 at 21:12

score 2 · Answer 1 · answered Aug 07 '14 at 21:29

You can overlap two images having two containers, each one containing an image, and position:relative; applied to the containers and position:absolute; applied to the images.

CSS

  div.inner {     
    position:relative;
}
div.outer {
    padding: 20px;
    text-align:center; 
    float:left;  
    position:relative;
}
img{
    position:absolute;
    left:0;
    top:0;
}

HTML

<div class="outer"><img src="http://placehold.it/280x280/fff000" /><div class="inner"><img src="http://placehold.it/240x240/000000" /></div></div>

DEMO http://jsfiddle.net/a_incarnati/5ouvn063/5/

css social image over image

1 Answers1