Image on top of an Image

[NevadaSam]

 

I am looking for a simple way to put an image on top of an image. I know how to use "z-index", but I want to do this without using additional img tags. My images(thumbnails) vary in height and width. The image I want to float on top at the bottom right of the thumbnails is a 12x12 magnifying glass image to indicate the image can be enlarged by clicking the thumbnail. Here is what I have so far.

 

 

.tn {
border: double;
float: left;
border-color:#0000FF;
padding: 3px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 0px;
/*     background-image:url(images/magnify.gif) no-repeat right bottom;  */
}


<img class="tn" src="image.jpg" alt="click to enlarge" />

 

Sam

;