Chapter 3 ■ CSS3 tranSitionS for imageS
most relevant to this section is the CSS4 image Values and replaced Content module, of which you can read an
overview at http://dev.w3.org/csswg/css4-images/. there’s also a module for backgrounds and borders
(http://dev.w3.org/csswg/css4-background/) as well as text (http://dev.w3.org/csswg/css4-text/).
it is almost inevitable that in the near future the term “CSS4” will become as broadly misunderstood and
misused as “CSS3” is today, as i discussed in Chapter 1.
A Simple Image Gallery Enhanced with CSS3
For your second example, you’ll create an image thumbnail gallery with HTML and enhance the display of large
images in the gallery with CSS3 transitions (see Figure 3-2).
Figure 3-2. A simple image gallery
You’ll need at least three pairs of images. Each pair will consist of a thumbnail image and a full-size version of
the same image. The large version can be whatever size you wish, so long as it is reasonable; I’d suggest making the
thumbnails roughly 150 x 150 pixels in size. To keep your file organization clear, follow a naming convention. For
example, if the full-size image is x,jpg, name the paired thumbnail x_thumb.jpg, both stored in an images folder.
The HTML Markup
Your goal is to keep the HTML used in the gallery as clean and simple as possible. To that end, you’ll use a
definition list as the basis for your markup. The definition list is made to contain pairs of elements: one (the
definition term) for your thumbnail, the other (the definition declaration) for the large image that it matches.
Assembling your content in the markup relative to your folders, the HTML for the page would look
something like Listing 3-7 (using images featured in the previous exercise, with an additional photograph by Paul
Bica (www.flickr.com/photos/dexxus/4137841698/).