Chapter 3 ■ CSS3 tranSitionS for imageSYou’ll use much the same approach you used previously: an image of known dimension (supplied courtesy
of NASA), using overflow: hidden to conceal the caption until you reveal it on hover (see Figure 3 - 8 ).
Figure 3-8. A clapperboard caption animation
The HTML and CSS for the clapperboard caption shown in Figure 3 - 8 is shown in Listing 3-32.Listing 3-32. Code to Create a Clapperboard Caption
We leave as we came and, God willing, as we shall return, with peace and hope...
- Eugene Cernan, commander of Apollo 18, the last man on the moon.
figure.clapperboard { position: relative; }
figure.clapperboard figcaption { position: absolute; top: 0; left: 0; padding: 2rem; }
figure.clapperboard, figure.clapperboard figcaption { width:618px;height:515px; }
figure.clapperboard figcaption q { font-size: 2rem; display: block; margin-bottom: 2rem; }
You haven’t yet hidden the caption , which makes it easier to position: you will need to rotate the figcaption
element 90 degrees, so that its bottom right corner matches the corner of the image (see Figure 3 - 9 ).