Chapter 3
CSS3 Transitions for Images
The most common uses for CSS3 transitions on web pages are, first, generating visual effects for user interface
(UI) elements (discussed in the next chapter) and, second, creating brief animated effects for images. In this
chapter, you’ll use the syntax of the Transitions module to enhance images and their captions by animating them.
These techniques demonstrate easy methods for visually enhancing your web pages, making image content and
associated information more interactive while minimizing screen “real estate”: an important consideration in the
age of mobile web development.
Simple Image CrossFade Effect
The first transition you will work on will demonstrate many of the fundamental concepts used in subsequent
exercises: positioning images that are exactly the same size on top of each other and initiating events on :hover
(see Figure 3-1).
Figure 3-1. A cross-fade effect using a transitioned opacity
There are a few possible ways to achieve the effect shown in Figure 3-1:• Option 1: Specify the first image as the CSS background of a container element, with the
second image inside the element itself.• Option 2: Create a container element with position: relative that holds both images,
with the second image having position: absolute.• Option 3: Specify both images as backgrounds and transition between them.All three approaches have their advantages and disadvantages. The first and third methods are potentially
quicker to create and more responsive, but are less accessible. Using the first method also means that any