Before you start, see the finished product below. Hover your mouse on the image below to see the final product we will build.

light bulb
light bulbs

Video explanation

Change image on hover using CSS

HTML

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

<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.

CSS

.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;
}

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).

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.

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:

Learn more about images

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.

You can download the template from my GitHub account: https://github.com/shihabiiuc/change-image-on-hover