Here we go, changing of colored image into black and white image on image hover. So here we are going to apply the gray-scale property, when the grayscale is on 100% the image will become intoblack and white image. gray-scale
DOWNLOAD CODE DEMO
Normal image
For that, in css just mention on hover property,
Normal image --> filter: grayscale (0%);
Black white image --> filter: grayscale (100%);
It will change image into black and white.
.c-b:hover { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }
black & white image
The image is changed for grayscale property, and the image is changed into black and white.
similarly we can change that image into black and white into normal color using that same coding. change of filter:grayscale(0%);
just revert and and make tha coding on hover. that's it
Normal image --> filter: grayscale (0%);
Black white image --> filter: grayscale (100%);
.b-c { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } .b-c:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); }
hi. but this code work only on google chrome.
ReplyDeletei try it on opera, cometbird, ff as well
any idea?