[Solved] How to give hover effect on the image used in html?

by


Try this.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
    width: 50%;
}

.image {
  content:url("https://stackoverflow.com/questions/43225489/assets/images/img-1.png");
  opacity: 0.8;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.container:hover .image {  
  content:url("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png");
  opacity:2;
}  

</style>
</head>
<body>

<div class="container">
  <img class="image">
  <p>Lorem ipsum dummy text</p>
</div>

</body>
</html>

2

solved How to give hover effect on the image used in html?