You can change an image on CSS hover. In this example, I will do it in a two-step process. In the first step, I will place an image over another. Finally, in the second step, I will use the hover event & opacity property to hide & show the image.

Hover your mouse on the image below to see the final product we are going to build.

vision
desk

Let’s see how you can change the images on hover.

Change image on hover using CSS

Step 1: stack/place an image over another

It’s important to see my HTML markup before we write any CSS. So you will better understand how it’s working.

I have the following HTML markup as you see below.

<div class="change-img-hover">
  <div class="img-normal">
    <img src="./img/photo-1.jpg" alt="vision">
  </div>
  <div class="img-hover">
    <img src="./img/photo-2.jpg" alt="desk">
  </div>
</div>

As you see in the above HTML, I have a container div that has a CSS class of “change-img-hover.” I inserted images into two different divs so I can target them easily on my CSS. That means, I wrapped the two images in two divs that have classes of “img-normal” & “img-hover” respectively. But you’re free to change any of these class names.

To place the second image on top of the first image, I have the following CSS below.

.change-img-hover {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
.change-img-hover .img-normal {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.change-img-hover .img-hover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

As you see in this CSS, I have positioned to relative both the container div (.change-img-hover) and the first image container div (.img-normal). And I have positioned absolutely the second image container (.img-hover). To learn more about it, see how the CSS position works. This is a comprehensive guide that is worth reading.

Anyway, this way, I was able to place the second image over the first one. Now I am ready to change the image on hover.

Step 2: Change images on mouse hover & mouse leave

To initially hide the second (top) image, I used “opacity: 0” for it. So the top image is not visible to us.

I also wrote another line of CSS that make changes to the opacity property on the hover & mouse leave. I want if someone hovers on “.change-img-hover“, the opacity for “.img-hover” div will turn into “1.” To do that, I have the following CSS:

.change-img-hover:hover > .img-hover {
  opacity: 1;
}

That’s it! Now if you hover over the image, the top image will appear and its opacity will change from zero to one. And if you leave your mouse, its opacity will again go back to 0 from 1. This is how it works.

But as you may have noticed that the image changes immediately which does not look good.

So I added a slight “transition” effect to this “opacity” property. By doing this, the image changes slowly and looks professional as you have seen in my live example (beginning of this post).

If you’re not sure, see my transition CSS below.

.change-img-hover .img-hover {
  -webkit-transition: opacity 0.7s ease;
  transition: opacity 0.7s ease;
}

If you’re not sure or confused, please check my entire CSS below:

.change-img-hover {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
.change-img-hover .img-normal {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.change-img-hover .img-hover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 0.7s ease;
  transition: opacity 0.7s ease;
}
.change-img-hover:hover > .img-hover {
  opacity: 1;
}

Learn more about images

Conclusion

In this post, you learned how to place an image over another and how to change an image on hover. I have a 600px max-width for the container div but you don’t have to. I did this so that the image takes less pace on this post. Otherwise, it has no other reason.

If you have any questions let me know.