Black and White Image with CSS

  • The grayscale(): It is a CSS function of filter property that converts image to grayscale.
  • grayscale(0-1) or grayscale(0-100%)

CSS filter: grayscale(100%)

HTML
<img src="photo.png" alt="">
CSS
img {
  -webkit-filter: grayscale(100%);  
  filter: grayscale(100%);
}

CSS filter: grayscale(0)

img {
  -webkit-filter: grayscale(0);  
  filter: grayscale(0);
}

CSS filter: grayscale(1)

img {
  -webkit-filter: grayscale(1);  
  filter: grayscale(1);
}

Hover grayscale effect

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

Hover grayscale effect

img{
  -webkit-filter: grayscale(1); 
  filter: grayscale(1);
}

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

DEMO

View Demo
487 Views
30980cookie-checkBlack and White Image with CSS

Leave a Reply

Your email address will not be published. Required fields are marked *