Pro CSS3 Animation

Chapter 3 ■ CSS3 tranSitionS for imageS

Listing 3-16. rem Font Sizing for a Document

html { font-size: 62.5% }
body { font-size: 1.4rem; }
h1 { font-size: 2.4rem; }

This also translates nicely to pixels: in the stylesheet above, body text on the page will be equivalent to 14px
in size and h1 elements rendered at 24 pixels.
Browser support for rem is surprisingly good: all recent browsers that support CSS Transforms (Safari 5+,
Chrome, Firefox 3.6+, IE9+, and Opera 11.6+) also support the rem unit).
Now let’s look at basic CSS for a figure and caption (see Listing 3-17).

Listing 3-17. Basic CSS for a Figure and Caption

figure { float: left; }
figure, figure img { width: 500px; height: 333px; }

figcaption {
font-family: Baskerville, "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-style: italic; background: rgba(0,0,0,0.4);
font-size: 2rem; padding: 0.8rem; color: #fff;
}

At this stage, the page will look something like Figure 3-4.

Figure 3-4. Images with positioned captions, prior to being hidden

Now that they are styled, you’ll hide the captions by using overflow: hidden on the figure element. At the
same time, you need to position the caption. For the images in this example, bringing the captions down from
the top will probably look the best. There are a few possible methods for locating the captions. I will use relative
positioning and a value for bottom that is slightly greater than the height of the image plus the height of the
caption (see Listing 3-18).

■ Tip it’s a good idea to check that the relocation of an element works before adding in transitions.