Open In App

How to Create a GrayScale Effect using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads