How to place <div> over floating image?

Question

I need to place zoom icons over site images. Some of images have float=left or float=right style. I can use jQuery, this is an example of my problem: http://jsfiddle.net/4Nvbe/1/

My current code:

$("a[rel^='lightbox']").each(function () { $(this).prepend('<div class="zoom"></div>'); });

Answer 1

You need to position the icons absolutely (position: absolute) and then use top, left and/or right properties to position them on the right spot over the image. Use position:relatvie in the wrapping (image) element to prevent the icons to position out of the image scope.