Lens magnifier

Use it for

• Dense illustrations, maps or product photos with fine detail
• Letting people inspect detail without leaving the page

Avoid

• Text people need to read in full: give them a real zoom instead
• Small images where the lens covers most of the picture

How it works

The illustration is rendered twice. The copy sits inside a circular overflow hidden lens and is transformed with translate(r minus x times zoom) then scale(zoom), so the point under the pointer lands in the lens centre. Pointer moves write both transforms directly. When the pointer leaves, the lens eases back to a parked spot on the gap night.

Accessibility

The illustration has a text alternative and the lens copy is aria-hidden. Touch drag moves the lens (touch-action none on the illustration only). Reduced motion removes the easing when the lens parks.