Yet another example of jQuery Image Zoom on Mouseover plugin that is fully compatible with all browsers. It enables you to show the full-size image on hover and view details.
As users move the mouse over the image they able to see the enlarged version of the image part. It shows the enlarged version on the right side in full-view instead.
Not only this, but it also has an inner Zoom feature to enlarge the part of the image itself.
It is lightweight and easy to use Image Zoomer plugin without writing the code from scratch. You can easily customize it and quickly implement it in your projects.
How to Create Image Zoom on Mouseover
It is very easy to create the mobile-friendly Image Zoom by just adding require files. You need to load the image-magnifier.css and image-magnifier.js into the webpage which has jQuery loaded.
<link rel="stylesheet" href="image-magnifier.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="image-magnifier.js"></script>
Make sure the plugin doesn’t need any HTML markup. Instead of that, it requires to implement the images inside the javascript.
So Let’s say we want to implement the Inner Zoom effect, We will simply initialize the imageZoom function and specify the path to the thumbnail & full-size images.
<script type="text/javascript">
imageZoom(
{ blur: false, inner: true, tint: false },
{ src: 'https://picsum.photos/1600/1280?image=593', height: 1280, width: 1600 },
{ src: 'https://picsum.photos/640/512?image=593', height: 512, width: 640 }
);
</script>Similar if you want to Tinted Zoom then we simply need to set the inner:false, and add color to the tint element.
<script type="text/javascript">
imageZoom(
{ blur: false, inner: false, tint: '#FF0000' },
{ src: 'https://picsum.photos/1600/1280?image=582', height: 1280, width: 1600 },
{ src: 'https://picsum.photos/320/256?image=582', height: 256, width: 320 }
);
</script>Another example is the Soft Focus Zoom that displays the enlarged version of the image next to the thumbnail with a blur effect.
<script type="text/javascript">
imageZoom(
{ blur: true, inner: false, tint: false },
{ src: 'https://picsum.photos/1600/1280?image=580', height: 1280, width: 1600 },
{ src: 'https://picsum.photos/320/256?image=580', height: 256, width: 320 }
);
</script>The last effect included is called Tinted, Soft Focus Zoom which applies the effect to the thumbnail when hovering.
<script type="text/javascript">
imageZoom(
{ blur: true, inner: false, tint: '#000000' },
{ src: 'https://picsum.photos/1600/1280?image=777', height: 1280, width: 1600 },
{ src: 'https://picsum.photos/640/512?image=777', height: 512, width: 640 }
);
</script>That’s it. Did you find this example of jQuery Image Zoom on Mouseover useful? If so then share it with friends and let me know in below comment box.
You can use this plugin into your personal and as well as commercial projects. Let’s play with it and create a more stunning effect.