How to change an image on hover (CSS)

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

And it brings me to the end of this post.

Do you need web design help? Feel free to reach out.

I am a freelance web developer helping other developers, designers, and clients. If you need web design-related help, feel free to reach out to me. Always a reasonable price and easy to communicate with.

Contact me on Fiverr See other options