change-src-image-on-hover-css.md

Change src image on hover (without white flash)

The following CSS and HTML will change a src image on hover, without any white flash effect from the next image loading. It does this by loading both images, setting the position to relative so they sit on top of each other, and configuring the z-index to control which image is visible.

// CSS

.product-photo-hover {
  display:block;
  position:relative
}
.product-photo-hover > img {
  background:#fff
}
.product-photo-hover > img:not(:only-child):nth-child(1) { 
  position:absolute;
  z-index:3
}
.product-photo-hover:hover>img:nth-child(1){z-index:1}
.product-photo-hover>img:nth-child(2){position:relative;z-index:2}

<!-- HTML -->

<a class="product-photo-hover" title="" href="#">
   <img src="https://example.com/default-image.jpg" /> 
   <img src="https://example.com/hover-image.jpg" />
</a>