Image Magnifier

Our Image Magnifier tool allows you to zoom in images on hover.
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How do you use the Image Magnifier tool in Webflow?[.c-title_step]

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

[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

[.c-text_step]Paste the following script in the “Before tag" field under the "Custom Code" section in the page settings.[.c-text_step]

<script src="https://tools.refokus.com/magnifier/bundle.v1.0.0.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

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

  • Add [.c-tool_tag]r-magnifier-img="1"[.c-tool_tag] to the image you wish to magnify.
  • The tool has a default magnifier, however if you want a custom design add [.c-tool_tag]magnifier="className"[.c-tool_tag] with your custom magnifier class name as the value.

To change the magnifier size add [.c-tool_tag]magnifier-width="size"[.c-tool_tag] and [.c-tool_tag]magnifier-height="size"[.c-tool_tag], note however the values are in pixels. The image below shows how we customised the magnifier within our demo, feel free to clone it and test it yourself!


Disclaimer: Part of the tool’s functionality is to set [.c-tool_tag]overflow:hidden[.c-tool_tag] 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.

Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

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