CSS3 Grayscale Filter

I stumbled upon a quick video on YouTube on how to use the CSS3 grayscale filter when hovering on an image.

The results can be seen below:

See the Pen hcBCJ by Adeline (@adelineyaw) on CodePen.

Click on the CSS tab in the Codepen example above to see how this filter effect can be implemented in your CSS.

“Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.” – Can I Use

“It’s worth noting that right now, CSS Filter Effects are an unoffical specification – however, the editors of the spec include representatives from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6.” – CSS3 Filters

References: