There are numerous methods of accomplishing this, which I'll detail with a few examples below.
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 {_x000D_
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");_x000D_
/* Firefox 3.5+, IE10 */_x000D_
filter: gray;_x000D_
/* IE6-9 */_x000D_
-webkit-filter: grayscale(100%);_x000D_
/* Chrome 19+ & Safari 6+ */_x000D_
-webkit-transition: all .6s ease;_x000D_
/* Fade to color for Chrome and Safari */_x000D_
-webkit-backface-visibility: hidden;_x000D_
/* Fix for transition flickering */_x000D_
}_x000D_
_x000D_
img.grayscale:hover {_x000D_
filter: none;_x000D_
-webkit-filter: grayscale(0%);_x000D_
}_x000D_
_x000D_
svg {_x000D_
background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);_x000D_
}_x000D_
_x000D_
svg image {_x000D_
transition: all .6s ease;_x000D_
}_x000D_
_x000D_
svg image:hover {_x000D_
opacity: 0;_x000D_
}
_x000D_
<p>Firefox, Chrome, Safari, IE6-9</p>_x000D_
<img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400">_x000D_
<p>IE10 with inline SVG</p>_x000D_
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">_x000D_
<defs>_x000D_
<filter id="filtersPicture">_x000D_
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />_x000D_
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />_x000D_
</filter>_x000D_
</defs>_x000D_
<image filter="url("#filtersPicture")" 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" />_x000D_
</svg>
_x000D_
You can find an article related to this technique here.
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 {_x000D_
background: url('http://www.google.com/logos/keystroke10-hp.png');_x000D_
height: 95px;_x000D_
width: 275px;_x000D_
display: block;_x000D_
/* Optional for a gradual animation effect */_x000D_
transition: 0.5s;_x000D_
}_x000D_
_x000D_
#google:hover {_x000D_
background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png');_x000D_
}
_x000D_
<a id='google' href='http://www.google.com'></a>
_x000D_
This could also be accomplished by using a Javascript-based hover effect such as jQuery's hover()
function in the same manner.
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.