See how the tiny Facebook icon is positioned in the lower right-hand corner over another image?
Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/
Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absolute
and position it however you want using bottom
and right
.
Here you go. This is done using 2 images.
<div class="parent">
<img src="http://i.ehow.com/images/a06/dv/5g/buy-car-repair-manuals-online-200X200.jpg" />
<div class="inner"><img src="http://www.airporthybridrentals.com/wp-content/uploads/2009/04/car-rental-sign.gif" /></div>
</div>
.parent{
width:200px;
height:200px;
position:absolute;
z-index:0;
}
.inner{
position:absolute;
z-index:1;
bottom:0;
right:0;
}
You can use css to solve the problem.
div {
position: relative;
display: inline;
}
.imtip {
position: absolute;
bottom: 0;
right: 0;
}
<div>
<img src="http://i.stack.imgur.com/Blaly.png" />
<img src="http://www.w3schools.com/favicon.ico" class="imtip" />
</div>
Basically, I've done more or less what ZDYN said, just that you need to include a display: inline
in the container otherwise the container div
spans the whole width.
See my answer to this question.
The difference with your situation is that you don´t need any javascript if you don´t want to, you can just add divs to the html and position them absolutely on top of the photos.
I think I would personally add the divs using javascript anyway so that they don´t clutter the html.