Chapter 3 ■ CSS3 tranSitionS for imageS
Listing 3-18. CSS to Hide and Position a Caption
figure { float: left; }
figure, figure img { width: 500px; height: 333px; overflow: hidden; }
figcaption {
font-family: Baskerville, Garamond, "Times New Roman", serif;
font-style: italic; background: rgba(0,0,0,0.4); font-size: 2rem;
padding: 0.8rem; color: #fff; position: relative; bottom: 400px;
}
figure:hover figcaption { bottom: 340px; }
Finally, you’ll add in the transition of the caption, as shown in Listing 3-19.Listing 3-19. CSS to Transition a Caption
figcaption {
font-family: Baskerville, Garamond, "Times New Roman", serif;
font-style: italic; background: rgba(0,0,0,0.4);
font-size: 2rem; padding: 0.8rem; color: #fff;
position: relative; bottom: 400px;
transition: 2s all; }
■ Note i’ve kept our images accessible by using descriptive filenames and alt attribute values. this is very
important: always remember that not everyone will be able to see or interact with your designs.
Image Card Stack and Fan Reveal
As web pages become more complex, they become more difficult to summarize and illustrate. If you’ve created
an extensive gallery page, it can be very difficult to choose just one image to spark visitors’ interest. One possible
solution is to use several images, displayed either in a keyframed slider gallery (as shown in Chapter 5) or an
interactive display. In this case, I’ll visibly stack several photographs on top of each other, revealing them on
mouseover to create greater interest and understanding of the linked content (see Figure 3-5).