#Captions

##What is it?

The old-school approach for including a caption with an image is to put the caption text alongside or below the image. As of HTML5 the figure and figcaption elements provide some explicit help with putting a caption below an image. That’ll do for wikipedia-style captioning. But modern captioneering goes further.

The image and the caption often overlap. To make this work effectively the caption has to be rendered in a way that makes it readable, e.g. by drawing a semi-transparent caption-text background rectangle in a contrasting color. A caption that overlaps an image might only appear when the mouse moves within the image; it might fade or slide into view, etc. In addition to making it possible to view the image without the caption in the way, this approach can make positioning the caption less critical.

How about putting a caption on top of an image? That text shouldn’t obscure anything important and should render in a way that preserves readability.

See the Pen CSS Shapes Hanging-Lamp by Adobe Web Platform (@adobe) on CodePen.

##When can I use it?

The examples using CSS Shapes are in Chrome 37+ and in the latest Safari releases. For a view of current and upcoming browser support, check out caniuse.com.

##Where can I learn more?

• The s3Slider demonstration of animated opaque JQuery sliders, by serie3.
• Pure CSS speech bubbles for label captions that overlay the image, by Nicolas Gallagher
• Captioneering, Hans Muller’s WebKit Blog