Make an Image turn Black and White on hover

Question

I have a linked image and I want to make it turn black and white when the user hovers on it. Can anyone help please? I need to make it either with CSS or JavaScript. Thanks

Answer 1

try this:

img.imgClass:hover {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
}
img.imgClass {
    filter: none;
    -webkit-filter: grayscale(0);
}