Pro CSS3 Animation

Chapter 3 ■ CSS3 tranSitionS for imageS

:target

The use of :target may be the most effective pseudo-selector in this instance, although it does require some
addition to your markup. :target derives from the use of traditional “anchors” of id values, detecting clicks on
elements linked to those ids.
Your HTML changes to that shown in Listing 3-13.

Listing 3-13. HTML for an Image Gallery with :target

A closeup photograph of a Jatropha Hybrid leaf

Closeup photgraph of leaf veins

Falls in Dundas Peak, Ontario, Canada

Under normal circumstances a link to an anchor would force the page to scroll to the location of the id
with a visual jump; that is avoided in this case because the dd elements are absolutely positioned near the top
of the page.
Only one line of the CSS requires modification. Your :hover declaration changes as shown in Listing 3-14.

Listing 3-14. CSS for an Image Gallery with :target

dd#jatropha:target, dd#veins:target, dd#cascada:target { opacity: 1; }

This approach also has the advantage of modifying the URL, meaning that users may be led to particular
images through the use of links with appended ids. For example, http://www.yourdomain.com/gallery.html#cascada
would bring up the last image in the gallery automatically.

Simple Popup Image Captions

It is also possible to display the caption of an image on mouseover, either in a gallery or as part of a user interface.
The ideal markup for this is either a definition list, as in the previous example, or a