How to use a magnifier lens on images in Webflow?

Script

Documentation

Example

View Demo

Clone

Use the Refokus Image Magnifier to help users get a closer look when viewing images on your project.

Step #1

Copy the

Image Magnifier

<script> and paste it before the </body> of your page

Copy Script Code

<script

src=

"

https://tools.refokus.com/magnifier/bundle.v1.0.0.js

"

></script>

Copied!

Step #2

Set Custom Attributes

Everything is made using custom attributes, so when we say “Add” that means "Add a custom attribute”.
‍Learn more

anchor link

General Notes

Disclaimer: Part of the tool’s functionality is to set overflow:hidden to the body when the magnifier is active, this avoids any horizontal scrolling if an image is placed too close to the edge of the screen.

Step #3

Publish your site to the staging domain to test the tool is working.

Clonable Demo

Publish your site to the staging domain to test the tool is working.

Thank you!

Oops! Something went wrong while submitting the form.

Give us feedback