Geek asks and answers

Make the image rotate black and white on hover

I have a linked image and I want it to turn black and white when the user freezes on it. Can anyone help? I need to do this either using CSS or using JavaScript. Thanks

+5
source share
3 answers

try the following:

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);
}
+5
source

You can search for black and white masks. There is an article about it here.

0
source

CSS 3 , :

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

}

- :

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

CSS: ( )

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

, , .

-1

More articles:


All Articles