Image Greyscale with CSS & re-color on mouse-over?

Question

I am looking to take an icon that is colored (and will be a link) and turn it greyscale until the user places their mouse over the icon (where it would then color the image).

Is this possible to do, and in a way that is IE & Firefox supported?

Answer 1

There are numerous methods of accomplishing this, which I'll detail with a few examples below.

Pure CSS (using only one colored 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 technique here.

Pure CSS (using a grayscale and colored images)

This approach requires two copies of an image: one in grayscale and the other in full color. Using the CSS :hover psuedoselector, you can update the background of your element to toggle 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 could also be accomplished by using a Javascript-based hover effect such as jQuery's hover() function in the same manner.

Consider a Third-Party Library

The desaturate library is a common library that allows you to easily switch between a grayscale version and full-colored version of a given element or image.

Answer 2

Answered here: Convert an image to grayscale in HTML/CSS

You don't even need to use two images which sounds like a pain or an image manipulation library, you can do it with cross browser support (current versions) and just use CSS. This is a progressive enhancement approach which just falls back to color versions on 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 like this:

<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>