PrismLensCursorHover

A Fresnel lens-inspired component magnifies your image on hover, smears it at the edges and splits the light into a thin rainbow. Works with mouse and touch devices, every part of the effect is adjustable.

❖ How to use

1. Drag Fresnel Lens onto the canvas and give it a width and height;

2. Pick your image in the Image field;

3. Preview the page and move your cursor over the image.

❖ Settings

• Image: the photo under the lens. It fills the frame and crops like Fill.

• Lens Size: how wide the lens is, in pixels;

• Zoom: how much the lens magnifies;

• Edge Smear: streaks the picture outward near the rim;

• Rainbow: how strong the colour split is at the edge;

• Glow: a soft brightness inside the lens;

• Ghost: a faint shifted copy, creates a double reflection;

• Follow Speed: how fast the lens catches up with the cursor;

• Radius: rounds the corners of the frame;

• Hide Cursor: hides the arrow so only the lens shows.

❖ Additional

• You can put as many on one page as you like. The lens only uses graphics power while someone is touching or hovering it.

• If a visitor has turned on "reduce motion" on their device, the lens moves straight to the cursor without gliding.

• Works well on hero images, portfolio grids, product photos and gallery pages.