Image Magnifier

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Interactions
CMS
Boosters

Image Magnifier

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

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>
<script src="https://tools.refokus.com/magnifier/bundle.v1.0.0.js"></script>
Copy Text to Clipboard
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
Identify the image you want to Magnify
Adding a custom design to the Magnifier
Defining the width of the Magnifier
Defining the height of the Magnifier
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
Share on LinkedInShare on TwitterShare via URL
Other Webflow tools you might be interested in
Back to directory
Social Share
Add social share buttons for Twitter, Linkedin, and Facebook in Webflow.
Link to tool
Time to Read
Calculate a read time for any text block or rich text element on your page.
Link to tool
Slider Generator
Create custom sliders in Webflow powered by SlickJS.
Link to tool