Elegant Image Swap Effect In jQuery And CSS3 - swapImagesOnhover

File Size: 49.7 KB
Views Total: 5237
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<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" 

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;



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