Convert Images to Black and White with CSS on home page

CSS Filters are a powerful tool that you can use to achieve varying visual effects.

CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale.

Grayscale all images on the web site

Example 01

 img {  
   -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */  
   filter: grayscale(100%);  
 }  

Only home page images(wordpress)

Example 02

 .home img{-webkit-filter: grayscale(100%)!important;   
  filter: grayscale(100%)!important;}  

CSS Syntax

filter: none / blur(px) / brightness(%) / contrast(%) / drop-shadow(px px px red) / grayscale(%) / hue-rotate(deg) / invert(%) / opacity(%) / saturate(%) / sepia(%) / url();