Position badge over corner of image automatically

Question

I have a layout where images \"float\" within a certain area. The layout looks like this:

Answer 1

EDIT3: This solution is very similar to my original solution. I didn't really look at your code much so I should have noticed this earlier. Your a tag is already wrapping each image so you can just add the badge in there and position it absolute. The a tag doesn't need width/height. Also you must add the badge image at the beginning of your a tag.

Demo: http://jsfiddle.net/wdm954/czxj2/1/

div.free_tile {
    width: 176px;
    height: 206px;
    float: left;
}

a.img_container {
    display: block;
    margin-bottom: 10px;
}

span.transect_badge {
    display:block;
    position: absolute;
    height: 20px;
    width: 20px;
    background-image: url('/images/transect-badge.png');
}

HTML...

---

Other solutions...

In my code I'm using SPAN tags so simulate images, but it's the same idea. The badge image, when positioned absolute, will create the desired effect.

Demo: http://jsfiddle.net/wdm954/62faE/

EDIT: In the case that you need jQuery to position. This should work (where .box is your container and .corner is the badge image)...

$('.box').each(function() {
    $(this).find('.corner')
        .css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
    $(this).find('.corner')
        .css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});

EDIT2: Another solution would be to wrap each image with a new container. You would have to move the code that you use to center each image to the class of the new wrapping container.

Demo: http://jsfiddle.net/wdm954/62faE/1/

$('.img').wrap('');
$('.imgwrap').prepend('');

Technically you can just add something like this to your HTML though without using jQuery to insert it.