How to Create a GrayScale Effect using CSS ?
The Grayscale is an effect that provides transition effect from colored image to monochrome image or vice-versa. This effect can be applied to various events like mouse-hover or you can also use a button to activate the effect.
Approach: We will be using the CSS built in function grayscale() to create this effect.
Example 1: First let’s look at transition of colored image to monochrome image. For this we will use grayscale() function in the hover selector. We just set grayscale value to 100% on mouse hover.
Example 2: Now for a transition from monochrome to the colored image, we will do the reverse process of example 1. We will use the grayscale() function at 100% for the <img> tag and then reduce it to 0% on mouse-hover.