Hey folks! New lesson here from @mistercreate on how to integrate a custom image magnification on mouse hover, like you see in Amazon and other ecommerce sites. 
Using a bit of custom code, you can add a magnifying glass to any of your images and even style the magnifier to get it looking how you want!
Nice! I like how webflow is leaning into showing off some external JS libraries.
Attempting to integrate this feature… see map image. I cannot get the magnification feature to work, and I believe I have followed the instructions as provided…
Hi! I’ve successfully implemented this on a site I’m working on but I’m wondering if there’s any way to adjust how zoomed in the magnification is. Is this possible?
I’m not sure if this is related but I’m also having an issue where the zoom area cuts off when I reach the bottom or right edge of the image. Effectively I’m only able to zoom in on a portion of the entire image.
Any help is appreciated!
Hello! I’m running into the same issue after following the tutorial. Did you ever figure it out? Thank you!
I get the same problem, this solution is scuffed 
i’d rather have the whole image just pop up and be centered when hovered.
this is the solution. its much more annoying to implement, but at least it works
<script type="text/javascript" src="https://assets.website-files.com/5e2755779d8b8ea1d6373797/5ea88e92dce9b4b66f165490_zoom.txt"></script>
<script>
jQuery(function(){
if(!$.fn.imagezoomsl){
$('.msg').show();
return;
}
else $('.msg').hide();
// plugin initialization
$('.magnify').imagezoomsl({
innerzoommagnifier: true,
// classmagnifier: "round-loope",
magnifiersize: [600, 300],
// disables the scrolling of the document with the mouse wheel when the cursor is over the image
// disablewheel: false
});
});
</script>
this code works, for some reason, as soon as you try to style everything, it just breaks. so I commented out the class. it would be nice to add style to it. im not sure if this is a bug with webflow or not.
EDIT:
I opted for the image to show in the center of the screen, and this works perfectly: (you have to scroll to see the whole thing)
<script>
// Wait for the DOM to load
document.addEventListener("DOMContentLoaded", function() {
// Get all the elements with class 'magnify'
const images = document.querySelectorAll('.magnify');
// Create a new image element that will be displayed on hover
const hoverImage = document.createElement('img');
hoverImage.style.position = 'fixed'; // Make its position fixed
hoverImage.style.top = '50%'; // Center it vertically
hoverImage.style.left = '50%'; // Center it horizontally
hoverImage.style.transform = 'translate(-50%, -50%)'; // Ensure it's centered properly
hoverImage.style.zIndex = '1000'; // Ensure it's above other elements
hoverImage.style.opacity = '0'; // Make it transparent
hoverImage.style.pointerEvents = 'none'; // Make mouse events pass through the image
hoverImage.style.maxWidth = '600px'; // Set max width
hoverImage.style.border = '1px solid #ccc'; // Make the border thinner and a lighter grey
hoverImage.style.boxShadow = '20px 20px 15px 0px rgba(0,0,0,0.15)'; // Add a lighter, larger drop shadow
hoverImage.style.borderRadius = '8px'; // Add rounded corners
hoverImage.style.transition = 'opacity 0.3s ease-in-out'; // Add transition effect
// Append the hover image to the body
document.body.appendChild(hoverImage);
// Loop over each image
images.forEach(function(image) {
// On mouse over, show the hover image and set its source to the hovered image's source
image.addEventListener('mouseover', function() {
// Only show the hover image if window's width is 600px or more
if(window.innerWidth >= 600) {
hoverImage.src = this.src; // Use this image's source for the hover image
hoverImage.style.opacity = '1'; // Show the hover image (by fading it in)
}
});
// On mouse out, hide the hover image
image.addEventListener('mouseout', function() {
hoverImage.style.opacity = '0'; // Hide the hover image (by fading it out)
});
});
});
</script>
this gets around the bug when you use a webflow class to style the popup, because i’m defining the styling in the script instead.
I made it so it shows up with a max width of 600, and doesn’t pop up if the screen size is less than 600.
Hi all, I’ve gotten the tutorial-version to work great on my end. However it seems like the interaction is only working for only the top left portion of the image. Anyway to get it to cover the whole image?