Grayscale image using CSS and mouseover color?

Question

I want to take the icon that is colored (and will be the link) and rotate it in shades of gray until the user places the mouse over the icon (where it will then color the image).

Is this possible, and thus are supported by IE and Firefox?

Answer 1

There are many ways to achieve this, as I will discuss below.

Pure CSS (with only one color image)

img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ } img.grayscale:hover { filter: none; -webkit-filter: grayscale(0%); } 

 img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */ } img.grayscale:hover { filter: none; -webkit-filter: grayscale(0%); } svg { background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); } svg image { transition: all .6s ease; } svg image:hover { opacity: 0; } 

 <p>Firefox, Chrome, Safari, IE6-9</p> <img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400"> <p>IE10 with inline SVG</p> <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377"> <defs> <filter id="filtersPicture"> <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /> <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" /> </filter> </defs> <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" /> </svg> 

You can find an article related to this method here .

Pure CSS (using grayscale and color images)

This approach requires two copies of the image: one in grayscale and the other in full color. Using CSS :hover psuedoselector, you can update the background of your element to switch between the two:

 #yourimage { background: url(../grayscale-image.png); } #yourImage:hover { background: url(../color-image.png}; } 

 #google { background: url('http://www.google.com/logos/keystroke10-hp.png'); height: 95px; width: 275px; display: block; /* Optional for a gradual animation effect */ transition: 0.5s; } #google:hover { background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png'); } 

 <a id='google' href='http://www.google.com'></a> 

This can also be done using a Javascript effect like jQuery hover() in the same way.

Consider a third-party library

The desaturate library is a shared library that allows you to easily switch between the grayscale version and the full color version of a given element or image.

Answer 2

Answered here: Converting an Image to Grayscale in HTML / CSS

You don’t even need to use two images that sound like pain or an image processing library, you can do this with cross-browser support (current versions) and just use CSS. This is a progressive boost approach that simply reverts to color versions in older browsers:

 img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ } img:hover { filter: none; -webkit-filter: none; } 

and filters.svg file as follows:

 <svg xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" /> </filter> </svg> 

Answer 3

I am using the following code at http://www.diagnomics.com/

Smooth transition from b / w to color with a magnifying effect (scale)

  img.color_flip { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ -webkit-transition: all .5s ease-in-out; } img.color_flip:hover { filter: none; -webkit-filter: grayscale(0); -webkit-transform: scale(1.1); } 

Answer 4

Here is a demo. Even works in IE7:

http://james.padolsey.com/demos/grayscale/

and

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

Answer 5

You can use sprite , in which there is both a version, and color and monochrome.