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.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Gray Scale Effect</title> <style> body{ background: grey; } img{ position: absolute; top:40%; left:50%; transition:.5s ease-in-out; } img:hover{ filter:grayscale(100%); } </style></head> <body> <img src=</body> </html> |
Output:
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.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Gray Scale Effect</title> <style> body{ background: grey; } img{ position: absolute; top:40%; left:50%; filter:grayscale(100%); transition:.5s ease-in-out; } img:hover{ filter:grayscale(0%); } </style></head> <body> <img src=</body> </html> |
Output:
Please Login to comment...