How to make colored image gray scale on hover? CSS Tricks

To make a colored image turn into gray scale on hover and vice versa can be achieved by using some simple css tricks. We will see both the codes here.

1) Turn Colored image to Gray Scale on hover:

CSS:

 img {  
 filter: gray;  
 filter: grayscale(1);   
 -webkit-filter: grayscale(0);   
 }  
 img:hover {  
 filter: none;  
 -webkit-filter: grayscale(1);  
 }  

HTML:

 <div id="wrapper"> <img id="myImage" src="IMAGE.JPG"/></div>  

In the html part, replace IMAGE.JPG with the link to the source image.


2) Turn Gray Scale image to Colored on hover.

CSS:

 img {  
 filter: gray;  
 filter: grayscale(1);   
 -webkit-filter: grayscale(1);   
 }  
 img:hover {  
 filter: none;  
 -webkit-filter: grayscale(0);  
 }  

HTML:

 <div id="wrapper"> <img id="myImage" src="IMAGE.JPG"/></div>  

Same as earlier, replace the IMAGE.JPG with the actual image source link.