Lazy image swap fade on hover.

Developer
Ashepherd1
Size
2,570 Kb
Views
30,360
  1. Lazy image swap fade on hover. Previews
  2. Lazy image swap fade on hover. HTML Codes
  3. Lazy image swap fade on hover. CSS Codes
  4. Lazy image swap fade on hover. JS Codes

How do I make an lazy image swap fade on hover.?

What is a lazy image swap fade on hover.? How do you make a lazy image swap fade on hover.? This script and codes were developed by Ashepherd1 on 29 November 2022, Tuesday.

Lazy image swap fade on hover. Previews
IQ Test

Lazy image swap fade on hover. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lazy image swap fade on hover.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="product-thumb"> <a class="product-miniset-thumbnail"> <img class="spillImage jsLazyLoad img-fade-orig" data-original='https://images.crateandbarrel.com/is/image/Crate/EclipseSilverTableLampOffSHF15/$web_setitem326$/160210093043/eclipse-silver-table-lamp.jpg' data-hover='https://images.crateandbarrel.com/is/image/Crate/EclipseSilverTableLampOnSHF15/$web_setitem326$/160302145048/EclipseSilverTableLampOnSHF15.jpg' width="300" height="300" /> <img class="spillImage jsLazyLoad img-fade-swap" data-original='https://images.crateandbarrel.com/is/image/Crate/EclipseSilverTableLampOffSHF15/$web_setitem326$/160210093043/eclipse-silver-table-lamp.jpg' width="300" height="300" /> </a>
</div>
<div class="product-thumb"> <a class="product-miniset-thumbnail"> <img class="spillImage jsLazyLoad img-fade-orig" data-original='https://images.crateandbarrel.com/is/image/Crate/DenleyNickelTableLampOffSHF15/$web_setitem326$/150820145023/denley-nickel-table-lamp.jpg' data-hover='https://images.crateandbarrel.com/is/image/Crate/DenleyNickelTableLampOnSHF15/$web_setitem326$/161129035623/DenleyNickelTableLampOnSHF15.jpg' width="300" height="300" /> <img class="spillImage jsLazyLoad img-fade-swap" data-original='https://images.crateandbarrel.com/is/image/Crate/DenleyNickelTableLampOffSHF15/$web_setitem326$/150820145023/denley-nickel-table-lamp.jpg' width="300" height="300" /> </a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.js'></script> <script src="js/index.js"></script>
</body>
</html>

Lazy image swap fade on hover. - Script Codes CSS Codes

.product-thumb { float: left; clear: both; padding: 40px;
}
.product-thumb:first-of-type { margin-top: 800px;
}
.product-thumb .product-miniset-thumbnail { width: 300px; height: 300px; float: left; position: relative;
}
.product-thumb .product-miniset-thumbnail .spillImage { width: 300px; height: 300px; border: 1px solid #e6e6e6; clear: both;
}
.img-fade-orig { position: absolute; top: 0; z-index: 3;
}
.img-fade-swap { position: absolute; top: 0; z-index: 2;
}

Lazy image swap fade on hover. - Script Codes JS Codes

$("img.jsLazyLoad").lazyload();
$('.img-fade-orig').mouseenter(function() { var elem = $(this); elem.attr('src', elem.attr('data-hover')).hide().dequeue().stop().fadeIn(300);
});
$('.img-fade-orig').mouseleave(function() { var elem = $(this); elem.fadeOut(300).promise().done(function() { elem.attr('src', elem.attr('data-original')).fadeIn(1); });
});
Lazy image swap fade on hover. - Script Codes
Lazy image swap fade on hover. - Script Codes
Home Page Home
Developer Ashepherd1
Username ashepherd1
Uploaded November 29, 2022
Rating 3
Size 2,570 Kb
Views 30,360
Do you need developer help for Lazy image swap fade on hover.?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ashepherd1 (ashepherd1) Script Codes
Name
Pattern Library
A Pen by ashepherd1
Menu Toggle
MatchMedia JS Listener
Spill AMP Page
Multiple modals from top at variable heights
DeferCuralate
Partially Responsive Content Layout
Fade Show Reveal by height
GR TYM
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!