How to Change image on Hover with CSS

Hello friends, we will create a CSS image hover effect where the image will change to another with mouseover in this blog. We will put two images, one on the other, using the CSS position absolute property. Later, I used opacity to show another image on hover. Now the CSS animation will occur instantly. That's why we used the CSS transition property so that the animation occurs smoothly. Please follow the below video tutorial for a better understanding.

I hope you watched the video and got the basic idea behind the snippet. The CSS animation snippet used here is often seen in e-commerce websites. For the source code, copy the code from the code boxes below and copy them in your HTML and CSS files.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>how to change image on hover with css</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
  <figure>
    <div class="hover-animation">
      <img class="img-back" src="https://i.postimg.cc/L64f0Hdt/1.jpg" alt="">
      <img class="img-front" src="https://i.postimg.cc/6qp3zp7T/2.jpg" alt="">
    </div>

    <figcaption>
      <h2>Rolex Watch</h2>
      <p>$999.99</p>
      <a href="#">Buy Now</a>
    </figcaption>
  </figure>
  <figure>
    <div class="hover-animation">
      <img class="img-back" src="https://i.postimg.cc/MTWKKpmt/3.jpg" alt="">
      <img class="img-front" src="https://i.postimg.cc/R0mvXZy9/4.jpg" alt="">
    </div>

    <figcaption>
      <h2>Samsung Mobile</h2>
      <p>$599.99</p>
      <a href="#">Buy Now</a>
    </figcaption>
  </figure>
  <figure>
    <div class="hover-animation">
      <img class="img-back" src="https://i.postimg.cc/1zyZDYV3/5.jpg" alt="">
      <img class="img-front" src="https://i.postimg.cc/Vk8NHg03/6.jpg
                                  " alt="">
    </div>

    <figcaption>
      <h2>Flower Vase</h2>
      <p>$59.99</p>
      <a href="#">Buy Now</a>
    </figcaption>
  </figure>
</div>
</body>
</html>

ADD CSS:

body{
  background: #ddd;
}
.wrapper{
  width: 1170px;
  margin: 0 auto;
}
figure {
  width: 32%;
  float: left;
  margin: 0;
}
figcaption {
  text-align: center;
}
figcaption h2 {
  text-transform: uppercase;
  margin: 15px 0;
  font-family: "Poppins ExtraBold";
}
figcaption p {
  width: 90%;
  margin: auto;
  font-size: 18px;
  font-family: roboto;
  letter-spacing: 2px;
}
figcaption a {
  background: tomato;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 15px;
  padding: 10px 30px;
  letter-spacing: 3px;
}
.hover-animation {
  position: relative;
  height: 350px;
  width: 350px;
  margin: 10% auto 0;
  color: #fff;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}

.hover-animation img {
  position: absolute;
  left: 0;
  width: 350px;
  height: 350px;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.hover-animation img.img-front:hover{
  opacity:0;
  cursor: pointer;
}

I hope you have created your own version of the snippet. Please share the articles of this blog and follow us for more updates. Thank you for stopping by.

Post a Comment

Post a Comment

About Us

Contact Form

How to Change image on Hover with CSS

You might like

Post a Comment

Post a Comment

Contact Form