Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create image magnifier using?
An image magnifier allows users to zoom in on pictures for a closer inspection, enhancing user experience and adding a professional touch to your website. Using HTML and CSS, you can create powerful image magnifiers that captivate users and improve visual engagement.
Approach
We will explore two different methods to create image magnifiers
Rollover/Follow zoom effect Shows magnified content in a separate preview area
Magnifying glass effect Creates a lens-like zoom overlay on the image
Method 1: Rollover/Follow Zoom Effect
This technique magnifies a segment of the image in a separate preview area without using overlays. When you hover over the main image, the magnified portion appears in an adjacent container.
Example
The following example creates a rollover zoom effect with a side preview panel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rollover Zoom Effect</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, sans-serif;
padding: 20px;
}
.main {
display: flex;
gap: 20px;
}
.main img {
cursor: zoom-in;
border: 2px solid #ddd;
}
.zoom-preview {
height: 300px;
width: 300px;
border: 2px solid #333;
background-repeat: no-repeat;
background-color: #f9f9f9;
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
.zoom-preview:empty::before {
content: "Hover over image to magnify";
}
</style>
</head>
<body>
<h4>Rollover Image Magnifier</h4>
<div class="main">
<img src="https://picsum.photos/300" id="image" height="300px" width="300px" alt="Sample Image" />
<div class="zoom-preview"></div>
</div>
<script>
const img = document.getElementById("image");
const preview = document.querySelector(".zoom-preview");
const calculateRatio = (value) => preview.offsetWidth / value;
const x = calculateRatio(100);
const y = calculateRatio(100);
const setBackgroundProperties = (posX, posY) => {
preview.style.backgroundImage = `url(${img.src})`;
preview.style.backgroundSize = `${img.width * x}px ${img.height * y}px`;
preview.style.backgroundPosition = `-${posX * x}px -${posY * y}px`;
};
img.addEventListener("mousemove", (e) => {
const posX = e.offsetX;
const posY = e.offsetY;
setBackgroundProperties(posX, posY);
});
img.addEventListener("mouseout", () => {
preview.style.backgroundImage = "none";
});
</script>
</body>
</html>
A 300x300 image appears on the left with a preview panel on the right. When you hover over the image, a magnified portion appears in the preview panel, following your mouse movement.
Method 2: Magnifying Glass Effect
This method creates a magnifying glass overlay that follows your cursor, showing an enlarged view of the area underneath. It uses the jQuery Magnify plugin for smooth implementation.
Note: This example requires external CDN resources (jQuery and Magnify plugin) to work properly.
Example
The following example demonstrates the magnifying glass effect using a lightweight jQuery plugin
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magnifying Glass Effect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.min.css"/>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, sans-serif;
padding: 20px;
}
.image-container {
margin: 20px;
text-align: center;
}
img {
width: 400px;
height: 300px;
border: 3px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h4>Magnifying Glass Image Effect</h4>
<div class="image-container">
<img src="https://picsum.photos/800/600" class="zoom"
data-magnify-src="https://picsum.photos/1600/1200"
alt="High Resolution Sample" />
<p>Hover over the image to see the magnifying glass effect</p>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/js/jquery.magnify.min.js"></script>
<script>
$(document).ready(function () {
$(".zoom").magnify({
speed: 100,
src: ''
});
});
</script>
</body>
</html>
An image appears with a smooth magnifying glass effect. When you hover over the image, a circular lens follows your cursor showing a magnified view of that area.
Key Differences
| Feature | Rollover Effect | Magnifying Glass |
|---|---|---|
| Dependencies | Pure CSS + JavaScript | Requires jQuery plugin |
| Preview Location | Separate panel | Overlay on image |
| User Experience | Side-by-side view | Natural lens feel |
| Implementation | Custom code | Plugin-based |
Conclusion
Both methods offer effective ways to create image magnifiers. The rollover effect provides a clean side-by-side preview, while the magnifying glass creates a more natural zoom experience. Choose the method that best fits your design requirements and user experience goals.
1K+ Views
