Overview
This component creates a zoomed clone of the image when the mouse enters the container. The clone moves according to the mouse position to simulate a magnifier effect.
- Image magnifier effect
- Mouse tracking zoom
- Adjustable zoom level
- Automatic clone cleanup
- Zero dependencies
Basic usage
Wrap an image with a container that has the
data-anim-zoom attribute.
The value defines the zoom multiplier.
<div data-anim-zoom="3">
<img src="@img/animmaster-pic.jpg" alt="">
</div>
Required structure
The zoom container must contain an image element.
[data-anim-zoom]
img
Zoom level
The zoom multiplier is defined by the value of
data-anim-zoom.
-
data-anim-zoom="2"— small zoom -
data-anim-zoom="3"— default zoom -
data-anim-zoom="5"— strong zoom
How it works
- User moves the mouse over the image container
- The script clones the image
- The clone is enlarged according to the zoom multiplier
- Mouse movement changes the position of the zoomed image
- When the mouse leaves, the cloned image is removed
Download
Use the Image Zoom module to create interactive product images, galleries, or detail previews with a lightweight and dependency-free solution.