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:
Last Updated :
21 May, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...