June 2025
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Click to use the magnifier
If you've ever been on a site where you can barely read the text, but zooming in on the browser destroys the layout of the page, this may be helpful. Maybe it's a legal document with tiny print, or a data-heavy table. This magnifier component offers a neat solution. It allows users to easily zoom in on parts of the text without affecting the layout of the page, making content more readable and accessible for everyone. It's a small touch that can significantly improve the user experience, especially for those with visual impairments.
We have two identical blocks of text layered on top of each other. The top layer is inside a container that has a circular clip-path applied to it, which is what creates the "lens" effect. The rest of the container hides any overflow.
When you move your mouse over the text, we track its position. This position is then passed to the top layer as CSS custom properties (--x and --y).
.magnifier {
clip-path: circle(50px at var(--x) var(--y));
}This clips the top layer to a circle around your cursor. But how does the text inside look magnified?
To make the text appear magnified, the text on the top layer is scaled up. If we just scaled it from the center, the text wouldn't line up with the text underneath it. The trick is to also shift the scaled text so that the point under the cursor matches the point in the original text.
We use a transform on the magnified content. We scale it up, and then translate it based on the cursor's position. This creates the illusion that you're looking through a physical magnifying glass. The transform origin is set to the cursor's position, and then we apply the scale.
.magnifiedContent {
transform: translate(calc(var(--x) * -1), calc(var(--y) * -1)) scale(var(--scale));
transform-origin: var(--x) var(--y);
}By using transform-origin with the same mouse coordinates, we ensure the scaling originates from the cursor's position. Then, a negative translate of the same coordinates brings that point back under the cursor, but now everything around it is scaled up, perfectly aligned with the text below. We also hide the actual cursor to complete the illusion.
On mobile devices, there's no mouse to hover. To make this work on touch screens, I added a small button to toggle the magnifier. When you tap it, the magnifier appears in the center of the text. You can then drag it around to inspect the content, offsetting the lens slightly to account for a user's finger. Tapping the button again hides it. This provides a similar, accessible experience for mobile users. To prevent the page from scrolling while dragging the magnifier, I set document.body.style.overflow = 'hidden' when the magnifier is active on mobile.
For accessibility, it's important to consider users who rely on screen readers or other assistive technologies. While this implementation is primarily visual, ensuring the text is still readable by these technologies is key. Since we're just duplicating text, screen readers will still be able to parse the original text block without issue. The magnifier is essentially a progressive enhancement. For users who might not be able to use a mouse with the required precision, the mobile implementation with a toggle could be adapted for desktop as an alternative activation method.