Image on top of another

Okay, new to this, so have pity.

I have a div which holds an image of a member, with a link around it. I have it floated left and then limit my query to show the number I want. That's fine.

But I need to place a gif ON TOP of each thumb, with a rounded corner and a transparent place where their image shows thru. But no matter how I code this, the "frame" displays after the thumb, not on top. I have it like:

<div id="thumb>thumb<div class="frame">frame</div></div>

And I position the frame relative with 0, 0. But I have tried for hours and can't get it.

Id there a simple way to place the 2nd image on top of the first, and float them both left so the others appear correctly?

Hope that makes sense.

Lena

 

Not tested.

.holder {
    float: left;
    }

.frame {
    position: absolute;
    top: 0;
    left: 0;
    }
========
<div class="holder">
  <img src="some.png" alt="stuff" />
  <img class="frame" src="frame.gif" alt="" />
</div>

Code (markup):

The float div will shrinkwrap its content, the image. The .gif must be the same size as the content image. It would be a Good Thing to explicitly set the height and width attributes on the images.

cheers,

gary