Chapter 3 ■ CSS3 tranSitionS for imageS
Listing 3-30. HTML and CSS Code for a Card Fan Effect with Generated Content
#cardfan { position: relative; margin: 0 auto; }
#cardfan, #cardfan img, #cardfan img:before, #cardfan img:after {
width: 640px; height: 480px;
}
#cardfan img, #cardfan:before, #cardfan:after {
border: 32px solid #ffe;
box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
position: absolute;
transform-origin: center 1200px;
}
div#cardfan::before { content: url(bike.jpg); }
#cardfan::after { content: url(roma.jpg); }
#cardfan::before, div#cardfan:after { position: absolute; left: 0; top: 0; }
#cardfan::before { transform: rotate(6deg); }
#cardfan::after { transform: rotate(−6deg); }
The code in Listing 3-30 creates the same card fan effect, with arguably more adaptability; to change the
photographs on either side of the central image, you only need to modify your CSS, not your markup. This
approach also has significant downsides, as noted previously.
You can animate these generated images by chaining pseudo-selectors, as shown in Listing 3-31.
Listing 3-31. CSS Code to Animate Generated Content
div#cardfan:hover::before {
transform: rotate(24deg);
}
div#cardfan:hover::after {
transform: rotate(−24deg);
}
■ Note Why the double colon in ::before and ::after? one of the few formal changes to existing selectors between
CSS2 and 3 was the W3C’s addition of another colon in generated content selectors, in order to distinguish their different
nature. modern browsers will recognize and support :: or : prepended to generated content selectors. in this book, i’ve
used the new formal version; for greater backward compatibility with older browsers, you may wish to use just one colon.
Clapperboard Image Captions with Different Entry
and Exit Effects
While bringing in image captions from the top or bottom works for short pieces of text, the transitions can be a
little large and clunky when there is a great deal of text involved. If the caption text is very long, it may be better
to “swing” it in on hover.