Another Image on Hover | CSS Animation Effect

byCodingFlicks -October 12, 2020

0

Today I am going to share another simple snippet based on the CSS image hover effect. In this particular project, I have shown how we can demonstrate another image hoving on an image. This kind of CSS image hover effect or CSS animation we often see on the e-commerce website when visitors approach a product image, another version of that image appears. I have used plain HTML CSS to get this effect.

In the HTML markup, I have taken a ''wrapper'' div, which will act as a container of the project's content. Inside the 'wrapper' div, I have taken 3 figure tags and have provided a 'box' div element in each of them. In each 'box.' part, I inserted two images. I have given a name to each box's first image of 'img-back' and 'img-front' for the second. No javascript or jquery animation is used to get this effect.

You may also like:

In the CSS part, I used basic CSS styling methods, and for each 'box' element, I provided a relative position value with a width and height. I set a transition of opacity for all the images in the box element. In the hover animation, I did the styling like when we hover over the box's 'img-front' class image, then it's opacity will be zero, and the second image will appear. I provided a transition-timing-function and transition-duration value so that the transition occurs smoothly.

Create one HTML and CSS file and copy and paste the code below. Save the project and run it to your browser, play around with the code by changing values.

HTML

<!DOCTYPE html>
<!--code by codingflicks (https://www.codingflicks.com/)-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Another Image on Hover | CSS Animation Effect</title>    
</head>
<body>
    
<div class="wrapper">
  <figure>
    <div class="box">
      <img class="img-back" src="https://i.postimg.cc/R0x375zS/1.jpg" alt="">
      <img class="img-front" src="https://i.postimg.cc/prryWPKZ/2.jpg" alt="">
    </div>
  </figure>
  <figure>
    <div class="box">
      <img class="img-back" src="https://i.postimg.cc/j5gdkBBJ/3.jpg" alt="">
      <img class="img-front" src="https://i.postimg.cc/y8465mpn/4.jpg" alt="">
    </div>
  </figure>
  <figure>
    <div class="box">
      <img class="img-back" src="https://i.postimg.cc/k4pqyKtQ/5.jpg" alt="">
      <img class="img-front" src="https://i.postimg.cc/05zw1CZq/6.jpg" alt="">
    </div>
  </figure>
</div>

</body>
</html>

CSS

body{
  background: darkgray;
}
.wrapper{
  width: 1370px;
  margin: 0 auto;
}
figure {
  width: 32%;
  float: left;
  margin: 0;
}

.box {
  position: relative;
  height: 300px;
  width: 400px;
  margin: 40% auto 0;
  color: #fff;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}

.box img {
  position: absolute;
  left: 0;
  width: 400px;
  height: 300px;
  -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;
}
.box img.img-front:hover{
  opacity:0;
  cursor: pointer;
}

I hope you liked it. Stay connected with this blog for more interesting snippets. Please follow our social media profiles. Thanks for visiting.

Please do not enter any spam link in the comment box.