How to Add a Magnifier for Images on Mouse Hover in Webflow

Web designers often look for creative ways to enhance user experience on their websites. One popular feature is the ability to magnify an image when a user hovers over it, allowing them to see details without any extra effort. In this article, we'll explore how to achieve this effect using custom code without actual coding. We will walk through the process in three simple steps: adding the custom code to the project, specifying the images to be magnified, and styling the magnifier.

Step 1: Adding the Custom Code

The first step involves adding the custom code to the project. The custom code can be obtained from a source like GitHub, but for convenience, we will provide the code for you to copy in the description of this lesson.

Adding to the Entire Project

1. Navigate to the Project settings.
2. Under Custom code, paste the custom code into the "Before closing body tag" section.
3. Save the changes.

Adding to an Individual Page

1. Go to the Designer.
2. Click on the page settings (cog icon).
3. Scroll down to the custom code section.
4. Paste the custom code before the closing body tag.
5. Save the changes.

Step 2: Specifying the Images

Next, we need to specify which images we want to enable the magnification effect for. This is done by adding a class to the selected images and using that class name in our custom code.

1. Select the image and give it a class name, for example, "magnify."
2. Go back to the page settings, scroll down to the custom code section, and enter the class name within the provided code.
3. Save the changes.

Using Combo Classes

For existing projects, instead of recreating or duplicating classes, you can use a combo class as long as the class name for the images is included in the custom code.

Step 3: Styling the Magnifier

The final step involves styling the magnifier to customize its appearance.

Changing the Size

1. Go back to the page settings and navigate to the custom code section.
2. Adjust the size of the magnifier as per your preference.
3. Save the changes.

Making It Circular and Adding Shadow

1. Add a Div block as the last element on the page.
2. Give the Div block the class name "round dash loope" (as recognized by our custom code).
3. Set the radius to 50% to round out the Div block into a circle.
4. Add a box shadow to create a shadow behind the magnifier.
5. Set the Div block to display: none to hide it from view.
6. Publish the changes.

Testing and Finalizing

After implementing these steps, the magnifier should now be functional on the live site. Users can hover over the specified images to see the magnification effect. Additionally, the feature works seamlessly on mobile devices, allowing users to tap on images for a closer look.

Conclusion

In conclusion, we have successfully added a magnifier for images on mouse hover in Webflow without the need for traditional coding. By adding the custom code, specifying the images, and styling the magnifier, we've enhanced the user experience on our website. This simple yet effective feature can engage users and provide a more interactive browsing experience. With the steps outlined in this tutorial, you can easily implement this feature in your own Webflow projects.