CSSPLAY

CSS DEMOS › Filter grey/gray to color/colour - two ways

Date : 31st March 2014

For all modern browsers

Method #1

Firefox, Chrome, Safari and Opera
with transition
IE6 - IE9 no transition

Information

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.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. 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.