Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterS
The code to achieve the effect shown Figure 7-5 is very similar to grayscale (see Listing 7-23).Listing 7-23. CSS to Transition a Sepia Filter on an Image
img { border: 20px solid #fff; box-shadow: 10px 10px 8px rgba(0,0,0,0.3); }
img.old { filter: sepia(1); transition: 1s filter linear; }
img.old:hover { filter: sepia(0); }
While the barn photograph in Figure 7-5 had previously been processed in an image editor to add
“weathering” and a partial vignette appearance, you’ve only used CSS to provide a sepia tone to the image. The
other effects can also be added with CSS.
Developing Polaroid Photo Effect
It’s possible to combine both a filter and a box-shadow with an inset value to re-create the appearance of a
developing Polaroid photograph by surrounding an image with a div and animating the style applied to the
container element. The image held inside it will need to be “pushed back” by using z-index so that the inset
inner shadow of the div overlays it (see Listing 7-24).
Listing 7-24. CSS to Transition an Image with a Polaroid Effect
div.polaroid { float: left; border: 25px solid #f3f4e3; border-bottom-width: 45px;
box-shadow: 0 0 200px 200px rgba(29,25,4,1) inset;
filter: sepia(.8); transition: 3s all ease-in; }
div.polaroid img { position: relative; z-index: -1; }
div.polaroid:hover { filter: sepia(.2); box-shadow: 0 0 50px 0 rgba(29,25,4,0.2) inset }
Figure 7-5. A color image (right) filtered with CSS (left)