[Edit]

CSS - grayscale and re-color image on hover

1 contributors

2 contributions

0 discussions

0 points

Created by:

Aaron1

568

In this article, we would like to show you how to grayscale and re-color image on hover effect using CSS.

Quick solution:

xxxxxxxxxx
 
img {
  filter: grayscale(100%);
}
​
img:hover {
  filter: grayscale(0%);
}

The :hover CSS pseudo-class is triggered when the user hovers over an img element with the cursor, changing the img style to the one specified within curly brackets.

Practical example

Edit

In this example, we set the grayscale filter on the img element to 100% at the beginning and disable it on hover effect using CSS pseudo-class.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    img {
      transition: 1s;
      filter: grayscale(100%);  /*      <----- required         */
    }
​
    img:hover {
      filter: grayscale(0%);    /*      <----- required         */
    }
​
  </style>
</head>
<body>
  <img src="https://dirask.com/static/bucket/1624644642609-mbQLqBEYJX--example-img-730w.jpg" />
</body>
</html>