Creating a Thumbnail Gallery

Creating a Thumbnail Gallery

First of all, you will need a series of thumbnail images and captions. Each thumbnail image and caption will be placed inside a <div> element. The caption will then be placed inside a <p> element as shown in Listing 12.1.

To make sure you don't target every <div> on the page, you should apply the same classname to each one.

Listing 12.1. HTML Code Containing the Markup for a Thumbnail Gallery

<div class="thumbnail">
    <img src="chapter12c.jpg" alt="">
    <p>A flower from my garden</p>
</div>
<div class="thumbnail">
    <img src="chapter12c.jpg" alt="">
    <p>White and pinkflower in Spring</p>
</div>
<div class="thumbnail">
    <img src="chapter12c.jpg" alt="">
    <p>Flower in morning light</p>
</div>
<div class="thumbnail">
    <img src="chapter12c.jpg" alt="">
    <p>A close-up of flower petals</p>
</div>
<div class="thumbnail">
    <img src="chapter12c.jpg" alt="">
    <p>A timeless flower </p>
</div>

You will be using three selectors in this lesson. The first selector will target any <div> that contains a "thumbnail" class.

The second selector will target any image inside a <div> that contains a "thumbnail" class.

The third selector will target any <p> element inside a <div> that contains a "thumbnail" class. The selectors are shown in Listing 12.2.

Listing 12.2. CSS Code Showing the Selectors for Styling the Container

div.thumbnail {...}
div.thumbnail img {...}
div.thumbnail p {...}