Overlaid captions using dynamic HTML

Move the mouse pointer over the picture to see its caption

This page uses a DIV as a container (I've given it a blue border to make it easily distinguishable). Inside this 'outer' DIV are an image plus an 'inner' DIV containing a text caption. The image has no position attributes, so just lines up with the top left corner of the outer DIV. The inner (caption) DIV is absolutely positioned, offset from the top left corner of the outer DIV, so that it overlays the image (it's also given a z-index value of 1, to make sure it sits on top of the picture).

Try resizing your browser screen - when the headline text word-wraps, the outer DIV and its picture are reflowed downwards. If you move the mouse over the picturem, the caption still appears in the right place. This is because its absolute position is offset from the outer DIV, not from the browser screen.

The caption DIV is initially hidden ('visibility:hidden'). The IMG tag has onMouseOver and onMouseOut events which make the caption visible and invisible respectively.