Zoom Image On Hover Using jQuery
File Size: | 2.7 KB |
---|---|
Views Total: | 1586 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A tiny jQuery image zoom script that provides a nice magnifying glass effect when hovering over an image.
This is a simple and great solution for websites that have big images and want to allow the user to see details using a magnifier rather than showing the whole image at once.
How to use it:
1. Add your image to the page as an element and as a background, respectively.
<div class="magnify"> <div class="magnifier" style=" background-image: url(example.jpg); " ></div> <div class="magnified"> <img src="example.jpg" /> </div> </div>
2. Apply CSS styles to the zoom area.
.magnify { position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; } .magnify .magnified { display: block; z-index: 10; margin: auto; width: 600px; height: 360px; border: 5px solid #fff; }
3. Style the magnifying glass effect.
.magnify .magnifier { height: 200px; width: 200px; position: absolute; z-index: 20; border: 4px solid white; border-radius: 50%; background-size: 1000%; background-repeat: no-repeat; margin-left: -100px !important; margin-top: -100px !important; pointer-events: none; }
4. Style the magnifying glass effect.
.magnify .magnifier { height: 200px; width: 200px; position: absolute; z-index: 20; border: 4px solid white; border-radius: 50%; background-size: 1000%; background-repeat: no-repeat; margin-left: -100px !important; margin-top: -100px !important; pointer-events: none; display: none; }
5. Load the latest jQuery library at the end of the document.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
6. Enable the magnifying glass effect.
$(".magnified").hover(function(e){ // Store position & dimension information of image var imgPosition = $(".magnify").position(), imgHeight = $(".magnified").height(), imgWidth = $(".magnified").width(); // Show mangifier on hover $(".magnifier").show(); // While the mouse is moving and over the image move the magnifier and magnified image $(this).mousemove(function(e){ // Store position of mouse as it moves and calculate its position in percent var posX = e.pageX - imgPosition.left, posY = e.pageY - imgPosition.top, percX = (posX / imgWidth) * 100, percY = (posY / imgHeight) * 100, perc = percX + "% " + percY + "%"; // Change CSS of magnifier, move it to mouse location and change background position based on the percentages stored. $(".magnifier").css({ top:posY, left:posX, backgroundPosition: perc }); }); }, function(){ // Hide the magnifier when mouse is no longer hovering over image. $(".magnifier").hide(); });
This awesome jQuery plugin is developed by Ak-ram. For more Advanced Usages, please check the demo page or visit the official website.