Chapter 3 ■ CSS3 tranSitionS for imageS
Listing 3-9. CSS for an Image Gallery Enhanced with Transitions
dl#gallery dd { position: absolute; left: 200px; top: 2.2em; opacity: 0;
transition: .85s opacity linear; }
dl#gallery dt:hover + dd { opacity: 1; }
Now the large images will fade in smoothly as you move the mouse over the thumbnail images.Adding Captions
It’s very helpful to users if they can read image captions. That doesn’t require adding any extra tags in this case,
just the caption content and CSS. I’ll modify one of the
Listing 3-10. HTML Example for a Simple Captioned Image
A closeup photograph of a Jatropha HybridYour CSS must also change in response (see Listing 3-11).Listing 3-11. CSS for a Simple Captioned Image
dl#gallery dd { position: absolute; left: 200px; top: 2.2em; opacity: 0;
text-align: center; font-family: Futura, Arial, sans-serif; color: white;
transition: .85s opacity linear; }
dl#gallery dd img { display: block; margin: auto; padding-bottom: 1.2em; }
In this case your captions will fade in with the images. It’s also common to animate the captions separately
from the images, which you’ll do in the next exercise.
Changing the Initiating Event
While :hover works to initiate the fade-in of the large image in the gallery, it may seem more natural for users
to click the thumbnail. There, you have something of a problem: there is no direct equivalent to the JavaScript
onclick event handler in CSS. However, there are a few alternatives in this case.
:active
While it is most strongly associated with links, it is possible to use the :active pseudo-class to initiate the
transition, as shown in Listing 3-12.
Listing 3-12. CSS for an Effect on Mouse-down
dl#gallery dt:active + dd { opacity: 1; }
You’ll see the primary disadvantage of this approach immediately: the large image only appears as long as
the mouse button is held down over the thumbnail.