How To Add Transition When Changing Img Src On Hover?

So I'm trying to add a different image when the original image is hovered over using javascript. The syntax I have is similar to this, which works great. function imgHover() {

Solution 1:

You can't create a transition effect changing just the src tag of an image.

One way of doing this is to create two image that is positioned absolute on top of each other with the top one having an opacity of 0.

If you need to change the hover image dynamically, you can still do that through javascript.

.image-wrapper {
  position: relative;
}
.image-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-out;
}
.image-hover:hover {
  opacity: 1;
}

<divclass="image-wrapper"><imgsrc="http://via.placeholder.com/350x150?text=normal"class="image"alt="normal" /><imgsrc="http://via.placeholder.com/350x150?text=hover"class="image-hover"alt="hover" /></div>