CSS play - Filter grey/gray to color/colour - two ways
31st March 2014
For IE7+, Firefox, Opera, Safari and Chrome - hover the images
Firefox, Chrome, Safari and Opera
IE6 - IE9 no transition
IE10+, Firefox, Chrome, Safari and Opera
copyright © stu nicholls - CSS play
Two methods of changing an image from grey/gray scale back to color/colour using just one image.
Method #1 uses CSS filter:grayscale for Chrome, Safari and Opera, filter:gray; for IE6-9 and svg animate for Firefox. This gives a 1 second transition in Firefox, Chrome, Safari and Opera.
Method #2 uses svg with image and has a CSS change of filter on hover giving an instant change to color/colour but does work in IE10 and IE11.
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.