As you may have noticed, if you hover on any of the images on my WordPress blog, they automatically turn to black & white. It’s awesome, right? Follow the instructions below to turn every image on your blog to Black and White on mouse hover with a simple CSS code.

1. Log into your WordPress Admin interface.
2. Go to Appearance.
3. Go to Customize.
4. Go to Additional CSS.
5. Copy and Paste the code below.
6. Publish.

img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}
img:hover {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

The Black and White effect is achieved with the grayscale value for the filter property. grayscale(100%) corresponds to Black and White and grayscale(0%) corresponds to full colors.
The -webkit-filter prefix is necessary for that property.

This post was updated on Tuesday / July 23rd, 2019 at 12:50 PM