Pro CSS3 Animation

Chapter 3 ■ CSS3 tranSitionS for imageS

Listing 3-28. A Card Fan Gallery with Images Referenced by Their src Attribute

#cardfan img[src="bike.jpg"] {
transform: rotate(6deg);
}
#cardfan img[src="roma.jpg"] {
transform: rotate(−6deg);
}
#cardfan:hover img[src="bike.jpg"] {
transform: rotate(24deg);
}
#cardfan:hover img[src="roma.jpg"] {
transform: rotate(−24deg);
}

Note that the technique in Listing 3-26 is less flexible than creating and referencing id values for your
images: if you change the filenames for any reason, you will have to change your CSS in response.
You could also raise the individual images to the foreground when hovered over (see Listing 3-29).

Listing 3-29. A Card Fan Gallery Image Raised to the Foreground

img[src="bike.jpg"]:hover, img[src="florence.jpg"]:hover { z-index: 2; }

You could have written less markup (but slightly more CSS) by using ::before and ::after pseudo-element
selectors to generate the other images. (Note that you cannot use generated content on tags, as they are
a form of replaced element). It’s also important to note that this approach practically kills accessibility, as most
screen readers do not currently access generated content, nor can JavaScript gain access to it. The technique
shown here is mentioned as an interesting possibility, not as a production method for central content in a site.

■ Note Replaced elements are htmL elements that have an intrinsic width and height, without benefit of CSS;

that is, any tag that produces a placeholder which then has its content replaced by an external resource. for

example, when you use , a text box appears at a size that is suitable for single-line text input.

this doesn’t mean you can’t apply CSS to resize it, just that the browser replaces instances of the tag with

elements of a predetermined size by default. the same happens with ; with no CSS, images are loaded onto

the page at their natural width and height.

, ,