CODEWITHSUNDEEP
javascriptcss
Silvan Theuma
Silvan Theuma

Reputation: 311

Make an Image turn Black and White on hover

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

Upvotes: 6

Views: 6920

Answers (4)

damianhouse
damianhouse

Reputation: 21

img .imgClass:hover {
    filter: grayscale(100%);
}

Upvotes: 1

mkdevoogd
mkdevoogd

Reputation: 136

In CSS 3 there is an spec for image filters, but this is not widly supported yet even in modern browsers:

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

}

Instead you could make a black and white alternative for every image with this effect:

<a href="..."><img class="grayscale" src="..." /><img class="color" src="..." /></a>

With this CSS: (not tested)

a img.grayscale {
  display: none;
}
a:hover img.color {
  display: none;
}
a:hover img.grayscale {
  display: block;
}

Default the grayscale image is hidden, on hover the colored one gets hidden and the grayscale one gets shown.

Upvotes: -1

Vishy
Vishy

Reputation: 1352

You can look for black and white "masks". Here is an article on that.

Upvotes: 0

bbosternak
bbosternak

Reputation: 357

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);
}

Upvotes: 6

Related Questions