Elegant Image Swap Effect In jQuery And CSS3 - swapImagesOnhover

Yet another jQuery Swap Image On Hover plugin that swaps out image sources with smooth fadeIn / fadeOut effects based on CSS3 transitions.

How to use it:

1. Load the latest version of jQuery library and the jQuery swapImagesOnhover plugin's files in the html file.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<link href="swapimagesonhover.css" rel="stylesheet">
<script src="swapimagesonhover.js"></script>

2. Add the class 'swim' to your image and specify the image your want to swap to:

<img src="before.jpg" 
     data-img="after.jpg" 
     class="swim"
>

3. That's it. Override the default CSS animations in the CSS as these:

.swim-container > img:first-child {
  opacity: 1;
  transition: all 0.7s;
  z-index: 100;
}

.swim-container:hover > img:first-child {
  opacity: 0;
  transition: all 0.7s;
}

Changelog:

2019-02-08

• Update swapimagesonhover.js

---

This awesome jQuery plugin is developed by chigozieorunta. For more Advanced Usages, please check the demo page or visit the official website.