Change the colored image into black and white image on image hover | 2my4edge

03 June 2013

Change the colored image into black and white image on image hover

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

image hover black and white

DOWNLOAD CODE                  DEMO

Normal image

normal


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

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

1 comment:

  1. hi. but this code work only on google chrome.
    i try it on opera, cometbird, ff as well

    any idea?

    ReplyDelete

^