Chapter 3 ■ CSS3 tranSitionS for imageSListing 3-7. HTML5 for a Simple Image Gallery
<!DOCTYPE html>
The Initial CSS
The CSS used here should be fairly self-explanatory: you’re positioning the definition list relative so that
the large, absolutely-positioned images are organized in relation to the list, not the body of the document.
Positioning the large images absolutely also means that you can stack them in the exact same point, and that
the rest of the document—including the thumbnails—will act as though the full-size images are not there at all.
Finally, you hide the large images with visibility: hidden., and reveal them again by using a :hover selector
on the dt elements with an adjacent combinator, as shown in Listing 3-8.
Listing 3-8. CSS for a Simple Image Gallery
dl#gallery { position: relative; }
dl#gallery dt img { width: 150px; height: 150px; margin: 2.2em; }
dl#gallery dd { position: absolute; left: 200px; top: 2.2em; visibility: hidden; }
dl#gallery dt:hover + dd { visibility: visible; }
Moving your mouse over the thumbnail image causes the large image it is paired with in the definition list
to appear immediately. However, there is a UI issue that you need to address before you can bring animation to
the gallery.
Improving the Gallery
What you’ve made so far works, but it’s a little clunky: you’ll notice that placing your mouse to the right of the
thumbnail image makes the associated large image appear immediately. You’ll fix both of these issues with a few
more lines of CSS, changing from hiding the large images with visibility (which can’t be animated)
to opacity (which can) while sharing the size of the definition terms with the thumbnail images, as shown in
Listing 3-9.