Captions over images

This is my response to Chris Coyier's screencast titled jQuery Part 3 – Image Title Plugin which I watched a couple of days ago. Something didn't sit right with me at the time, and I've now worked out what it was: JavaScript is not required!

I'll present a JavaScript-free approach for displaying captions over images that uses truly meaningful markup.

So what is meaningful markup for images and image captions? This is a debated issue, but I believe the definition list to be the most appropriate element at our disposal. While an image is clearly not a "term", a caption does describe an image, just as a definition describes a term. Meaningful markup for an image and its caption should look something like the following:

<dl>
    <dt><img src="images/paris.jpg" alt="View from Notre Dame de Paris" /></dt>
    <dd>View from Notre Dame de Paris</dd>
</dl>

Ideally, images appearing one after the other should belong to the same definition list.

My aim was to achieve a result similar to Chris's image title plugin demo simply by styling a definition list containing images and their captions. In the end, I was forced to abandon the ideal of using a single definition list for multiple images and captions: the nature of CSS positioning dictates that each image–caption pair reside in its own element. The final markup, however, is still quite clean:

<dl class="captioned-image">
    <dt><img src="images/paris.jpg" alt="View from Notre Dame de Paris" /></dt>
    <dd><span>View from Notre Dame de Paris</span></dd>
</dl>

Additional markup required:

  • Each definition list must have a class name of captioned-image applied
  • Each caption must be wrapped in a span element (captions to appear on multiple lines require multiple span elements)

Check out the captions over images demo to see the approach in action. The CSS responsible for the appearance of the captions is as follows:

dl.captioned-image         { position: relative; margin: 1em 0; }
dl.captioned-image dt img  { display: block; }
dl.captioned-image dd      { position: absolute; left: 0; bottom: 1.25em;
                             font: bold 2em/1.25em Helvetica, sans-serif; }
dl.captioned-image.top dd  { top: 1.25em; }
dl.captioned-image dd span { display: block; float: left; clear: both;
                             background: #000; background: rgba(0, 0, 0, 0.7);
                             padding: 0.25em 0.5em; color: #fff; }

I set out to display captions over images without the use of JavaScript while keeping meaningless markup to a minimum. Have I succeeded, do you think?

Comments

Wow! Dude, this is probably one of the coolest ways to get this done without JS.

Thanks for sharing!

David B

Not a problem, David. It's great to see that I'm not the only one who loves to make content look great without compromising the purity of the markup. :)

Hi David, I really like this approach using a minimalist code practice, while also staying away from jquery if it is not absolutely needed. For one thing, I am really a novice designer, but I am striving for standards and to try and learn as much as possible as well along the way. Can this technique be used for an image slider, seeing how I am already using an "Unordered List" to do so?

Thank you, you and Chris C are both, web design heroes to me.

Shane

Shane

Hi Shane. I'm pleased to hear that you found this approach useful. If you point me in the direction of your image slider I'll have a look to see whether captions could be applied in the same way.

My understanding is that Easy Slider requires images to appear inside an unordered list. I've provided an example of an image slider that accepts the definition lists we know and love in a post titled Prototype image slider.

Wow thanks David, that could be just the solution I am looking for. I'll check it out later on today.

Shane

Shane

Hi David,

I like this approach and would definitely use it for an image gallery.

However, a large portion of the sliders I've come across are for featured content i.e posts on a blog and, in that instance I think the h2 would be my preferred choice.

Thanks for sharing.

Sam

Respond