Chapter 3 ■ CSS3 tranSitionS for imageS
The code to position the caption in Figure 3 - 9 can be seen in Listing 3-33. (Note that I’ve used the CSS3
box-sizing property to ensure that the figcaption remains the right width and height after padding is added.)
Listing 3-33. CSS Code to Position a Clapperboard Caption
figure.clapperboard figcaption { font-family: Futura, Arial, sans-serif;
font-weight: 100; font-style: italic; color: black;
box-sizing: border-box;
font-size: 1.2rem; padding: 2rem; padding-top: 8rem;
border: 2px solid black;
transform-origin: bottom right; transform: rotate(90deg);
}
Now that the caption is in the right location, you can turn off the border, set overflow to hidden, and reverse
the colors (see Listing 3-34).
Listing 3-34. CSS Code to Position a Clapperboard Caption
figure.clapperboard, figure.clapperboard figcaption {
width:618px;height:515px;
overflow: hidden;
}
figure.clapperboard figcaption {
font-family: Futura, Arial, sans-serif;
font-weight: 100; font-style: italic; color: white;
font-size: 1.2rem; padding: 2rem; padding-top: 8rem;
box-sizing: border-box;
background: rgba(0,0,0,0);
Figure 3-9. Figure and Rotated Caption, with Relocated transform-origin Highlighted