Cross-Browser Grayscale image example using CSS3 + JS using browser user agent detection by Streamline

Cross-Browser Grayscale image example using CSS3 + JS v2.0

With browser feature detection using Modernizr

Tested and should work on Firefox 3.5+, Chrome, Safari 4+, Opera 9+, Internet Explorer 7, 8, 9, 10, 11 and Microsoft Edge

If you are running Microsoft Edge please make sure that you activate CSS filters via about:flags

(hover over these images using your mouse to toggle grayscale)

Grayscale image example 1 Grayscale image example 2 Grayscale image example 3
View tutorial
Download source