UX Design and Development course

Simple hover effects with CSS(webkit) filters


Simple hover effects created with CSS filters. CSS3 filters are currently supported in WebKit nightlies. Hence the walkthrough only uses the -webkit prefix for applying the filter effects.

By default the images have the filter applied. Hovering disables the filter taking the images to the default state in a smooth transition.

This is a pretty cool example for using CSS Filters as design effects. As an added bonus, the demo is an automated player that builds the code as you watch! Cool!