CSS rollover effects on text have been used for a long time, and I’ve demonstrated many variations on the concept in past articles. More recently icon fonts have made the creation of UI elements far easier. For everything else – in which a link requires a hover effect but is not text, nor something that can be encoded as a font – the traditional solution has been CSS sprites.
The limitations of CSS sprite images are well known:
I’ve talked about animating filters previously, but they are not always the most appropriate way to create image transitions. For some effects – such as replicating the development process of a Polaroid photograph – you might need to think a little out of the box.
We don’t want this effect altering the outside edge of the picture, which would happen if we simply added a borde to the image. Instead we’ll create a frame with a div:
In recent articles I’ve shown how to create cross-browser image filter effects with CSS and SVG: 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 browsers 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).
