Peek Lens

A round lens that follows the cursor and shows the image differently inside it. Built for portfolios, product shots and editorial pages where you want visitors to look closer.

Lens: Colour shows full colour over a black and white base. Focus shows a sharp view over a blurred base. Zoom magnifies what is under the cursor. Second Image reveals a different picture, such as a before and after or a detail shot.

Size and edge: set the lens diameter and how soft its edge is. An optional thin ring outlines it.

Follow: the lens eases after the pointer. Set how fast it catches up.

Idle: when nobody is hovering, the lens can drift slowly over the image, rest in the centre or hide.

Touch and keyboard: tap or drag to move the lens on phones. Focus the component and use the arrow keys to move it, Shift for bigger steps.

The image keeps its alt text for screen readers. The lens copy is decorative and hidden from them.

Pure CSS masks, zero dependencies, no network calls. Animation runs only while it is on screen and stops when the lens settles. Visitors who ask for reduced motion get a lens that moves without easing or drift. On the canvas it shows the lens in the centre.

Ships with a demo image so it works the moment you drop it in.

Built by KHZ ART, a Tokyo studio working in editorial and fashion.