Product Image Magnify Lens — Free HTML CSS JS Amazon-Style Zoom Snippet

E-commerce product pages often need to show fine detail — fabric texture, stitching, screen resolution — that a normal-sized photo can't convey. The "magnify lens" pattern, popularized by Amazon, solves this by overlaying a small square lens on the image that follows the cursor, while a separate zoomed panel shows a magnified view of exactly the region under the lens.

How the lens follows the cursor

A mousemove listener on the image container calculates the cursor's position relative to the container using e.clientX - rect.left and e.clientY - rect.top (where rect is from getBoundingClientRect()). The lens is centered on the cursor by subtracting half its own size from that position. Math.max(0, Math.min(...)) clamps the lens position so it never slides past the edges of the image — without this clamp, dragging the cursor to the very edge would push the lens partially outside the image bounds, which looks broken and would reference invalid image coordinates.

How the zoomed panel shows the correct region

The zoom panel is a separate element with its own background-image set to the *same* image as the product photo, but scaled much larger via background-size (the container's width/height multiplied by a ZOOM_FACTOR), and then positioned with background-position set to the negative of the lens's coordinates, also multiplied by ZOOM_FACTOR. This is the same technique used by CSS sprite sheets: an oversized background image is shifted so only the desired region shows through the panel's fixed viewport size. Because the lens position and the background-position math both derive from the same x/y values (just scaled by the zoom factor), the zoomed view always shows precisely what's under the lens, not an approximation.

Why the zoom factor is a single constant

ZOOM_FACTOR controls both how much larger the background image is scaled and how much further the background-position shifts per pixel of lens movement — these two numbers must always match, or the zoomed image would drift out of alignment with the lens as the cursor moves. Keeping it as one shared constant guarantees they never get out of sync.

Extending to real photography

This demo uses a repeating CSS gradient as a stand-in "image" so the effect is visible without an external asset. In production, set background-image: url(...) on .product-image with a real, sufficiently high-resolution photo — the zoom quality is limited by the source image's native resolution, since the zoom panel is just scaling that same file larger.