demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Florence, ItalyAncient Aqueduct, ItalyBike on a Roman Street

Animating CSS3 Image Filters

css / filters

Estimated reading time: 2 minutes, 25 seconds

In recent articles I’ve shown how to create cross-browser image with and : converting color photographs to black and white and sepia-tone, as well as blurring them. The next obvious step is to animate these effects.

Right now, these effects can be fully transitioned only in the most recent builds of Chrome and Safari; other will show a “flick” between two filtered states, with no animation. As a rule, I don’t show web development techniques until they can be duplicated in at least two different browsers, but in this case, the effects are so neat (and expected to be fully supported in all browser versions so soon) that I’m making an exception.

You can see how your browser performs with animated filter effects in the example at the top of this article (a variation on my earlier “Animated Card Fan” effect, with individual transitions on each card when it is hovered over).

Greyscale to Color Image Transition

An obvious use of an animated filter is to transition an image from greyscale to color on mouseover, an ideal effect for a portfolio or image gallery.

The code is surprisingly simple: first, we set up the image:

<img src="roma.jpg" alt="Roma" id="roma">

Add the filter below it:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>

Then turn it into greyscale, using the technique I discussed in the earlier article:

img#roma {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
transition: 1s;
}

To transition the effect, we must set the greyscale filter to the opposite value for browsers that support it, and to none for other browsers:

img#roma:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
filter: none;
}

In Webkit-based browsers, you’ll find that the black and white image transitions into color; in other current browsers, the change happens instantaneously.

Sharpening A Blurry Image

Transitioning a blur takes very much the same approach: I’ve covered the “off” setting in a previous article, so I won’t repeat it here.

Sepia Tone To Color Image

Colorizing a sepiatone image takes much the same approach as greyscale-to-color. The markup:

<img src="bike.jpg" alt="Bike on a Roman street" id="bike">

I’ve covered the SVG sepia filter in another article, so I won’t repeat it here.

The setup CSS:

img#bike {
-webkit-filter: sepia(100%);
filter: sepia(100%);
filter: url(#sepia);
background-color: #5E2612;
filter: alpha(opacity = 50);
transition: 1s;
}

The hover state CSS:

img#bike:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
filter: alpha(opacity = 100);
filter: none;
}
Play with the code for these transitions on Codepen
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.