Using CSS to style thumbnails and captions

This article was first published on tjkdesign.com (01-23-2007).

The challenge:

Take a sneak peek

You can also check the following examples that use "zoom", "-mox-inline-stack", "table-cell", etc.:

Let's look at this step by step.

The markup

I think a dl (Definition List) is the most appropriate element to use here as we are dealing with a list of elements that are paired. I'll be using the dts to hold the thumbnails and the dds to hold the captions (you're free to argue this point).
Also, note that I have added a elements as in real life these thumbnails would be linked to larger images.

<dl>
    <dt><a href="#"><img src="img/00.jpg" alt="Teacups" /></a></dt>
    <dd><em>Teacups</em>Pte de Vanves</dd>
    <dt><a href="#"><img src="img/01.jpg" alt="Soldiers" /></a></dt>
    <dd><em>Soldiers</em>Pte de Vanves</dd>
    <dt><a href="#"><img src="img/02.jpg" alt="Paris facade" /></a></dt>
    <dd><em>Paris facade</em></dd>
    <dt><a href="#"><img src="img/03.jpg" alt="La Conciergerie" /></a></dt>
    <dd><em>La Conciergerie</em></dd>
    <dt><a href="#"><img src="img/04.jpg" alt="Pont Neuf" /></a></dt>
    <dd><em>Pont Neuf</em> The oldest bridge in Paris</dd>
    <dt><a href="#"><img src="img/05.jpg" alt="Jeanne d'Arc" /></a></dt>
    <dd><em>Jeanne d'Arc</em> Near the Louvre</dd>
    <dt><a href="#"><img src="img/06.jpg" alt="The Louvre" /></a></dt>
    <dd><em>The Louvre</em></dd>
    <dt><a href="#"><img src="img/07.jpg" alt="Place Vendôme" /></a></dt>
    <dd><em>Place Vendôme</em></dd>
    <dt><a href="#"><img src="img/08.jpg" alt="Sculpture" /></a></dt>
    <dd><em>Sculpture</em></dd>
    <dt><a href="#"><img src="img/09.jpg" alt="" />The Seine</a></dt>
    <dd><em>The Seine</em> View from the left bank</dd>
</dl>

This is how it appears in the browser without any style applied

The concept

It is beneficial to understand how things work before applying the necessary styles, so some background colors and a border will help illustrate the "basics".

The CSS rules

Short, plain and simple (note that some values must match.)

dl {
    float: left;
    text-align: center;
}
dt,
dd {
    width: 10.5em;
    float: left;
}
dt {
    margin-bottom: 4em;
}
/* vertical space between the images */
dd {margin:75px 0 0 -10.5em;
}
img {
    vertical-align: bottom;
    border: 0;
}

With a few more rules we end up with a nice gallery of thumbnails and captions that flow.
Note that I am using the pseudo-classes :focus, :hover and :active to display a red "border" around the images. This is to give a visual clue to users.

Special thanks go to: