Languages
[Edit]
EN

CSS - change image opacity on hover

0 points
Created by:
Paris-Bateman
314

In this article, we would like to show you how to change image opacity on hover using CSS.

Quick solution:

img {
  opacity: 60%;
}

img:hover {
  opacity: 100%; 
}

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

In this example, we change the img element opacity value from 60% to 100% on hover event using CSS pseudo-class.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    img {
      opacity: 60%;
    }

    img:hover {
      opacity: 100%; 
    }

  </style>
</head>
<body>
  <img src="https://dirask.com/static/bucket/1624644642609-mbQLqBEYJX--example-img-730w.jpg" />
</body>
</html>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join