20'C 흐림
서울 강남구
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"></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;
}
HTML, JAVASCRIPT, Elegant Image Swap Effect In jQuery And CSS3 - swapImagesOnhover