35 CSS image hover captions

Here’s a quick CSS example which will show you how to create image captions that appear only when the mouse pointer hovers over the image.

They are done entirely in CSS, without any need for JavaScript. They’re great for stylish photo galleries.

1. The CSS and XHTML code

Here’s the working code, which you can copy and paste and see working:

<style type="text/css">
#example {
  z-index: 0;
  width: 128px;
  height: 128px;
  position: relative;
}
#example img {
  z-index: 1;
}
#example span {
  display: none;
}
#example:hover span {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2px 5px;
  background:  pink;
  color: white;
  font-weight: bold;
  font-size: 0.8em;
}
</style>
<div id="example">
  <img src="paula.jpg" width="128" height="128" alt="Paula Seling" title="" />
  <span>Paula Seling</span>
</div>

2. Working example

You can see the example in action here. You can also see a more complex example, an entire photo gallery, over at Flock.

3. Explanations

What we do is define a block with a fixed size, in the form of a div (Flock used a <li> instead). Ideally, it should match the size of the image, so the block and image are identical in size, and aligning the caption against the edge of the block would align it against the edge of the image too.

Inside the block we put a simple <img> and a <span> tag, which will serve as a caption. They degrade nicely.

The first trick is to grant the caption display:none by default, so it doesn’t normally appear.

How we make it appear is the second trick: we use the :hover selector, but we use it on the containing block, not the caption, like so: #example:hover span. This way, we trigger effects on one element (the <span>) with hovering over another element.

The third trick consists of having the container block assume position:relative, while the caption is granted display:block and is aligned using and right:0 and bottom:0. This will superimpose the caption properly. If we didn’t use the position effects, the <span> would appear below the image. And if we didn’t use position:relative on the block, the <span> would align against the page instead of the block.

One more trick: set the z-index of the block, image and caption in increasing order, just to make sure the image will appear above the block, and the caption above both. Yeah, it’s kind of redundant, but better safe than sorry.

4. Cross-browser compatibility

Unfortunately, Internet Explorer doesn’t support hovering over one element to pass style effects to another. However, by setting the alt attribute on the image, Explorer will render it as a tooltip, which conforming browsers don’t do.

Keep the title attribute empty, because browsers that would render that as a tooltip will most likely know how to render the caption too.

There is, of course, a trick to make Explorer change one element upon a :hover event on an ancestor. You guessed it, it involves JavaScript. I won’t insist on it, because you can find a very good example as part of the Suckerfish Dropdowns. You’ll have to adapt it, as homework.