Chapter 3 ■ CSS3 tranSitionS for imageSListing 3-37 presents the full CSS code.Listing 3-37. CSS Code for a Clapperboard Caption
figure.clapperboard { position: relative; overflow: hidden; }
figure.clapperboard figcaption { position: absolute; top: 0; left: 0; padding: 2rem; }
figure.clapperboard, figure.clapperboard figcaption { width:618px;height:515px; }
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);
text-shadow: 3px 3px 1px rgba(0,0,0,0.6);
transform-origin: bottom right; transform: rotate(90deg);
}
figure.clapperboard:hover figcaption {
transform: rotate(0);
opacity: 1;
background: rgba(0,0,0,0.6);
transition: transform 2s cubic-bezier(.12,.49,.17,.87), background .9s linear 2.2s;
}
figure.clapperboard figcaption q { font-size: 2rem; display: block; margin-bottom: 2rem; }
You’ll notice that the background now fades in 200 milliseconds after the text rotates into place. The one
remaining issue is that the caption disappears instantly when the user moves the mouse off the image, causing
the same issue that you encountered when I introduced transitions in Chapter 2. Moving the transition code into
the default state for figcaption will mean that the transition will reverse itself on mouseout, which will look a
little odd, too. What you want, ideally, is to have the figcaption disappear in a different way than it appeared.
Changing the Exit Event
To achieve this effect, you will be animating three properties: opacity, transform, and background. You’ll divide
the transition explicitly into separate components to make it easier to track. The order in which you specify the
properties must be the same each time for this effect to work.
First, however, you will add opacity to the various states (Listing 3-38).
Listing 3-38. Improved CSS Code for a Clapperboard Caption
figure.clapperboard figcaption {
opacity: 0;
...
figure.clapperboard:hover figcaption {
opacity: 1;
...
Right now this makes no difference at all, as the caption is invisible in its default state due to overflow:
hidden on the figure element. But it will make a difference later, as you will soon see.
Next, you will break down the various animation components (Listing 3-39).