Enlarge Image on Hover

You may have images in your website that are rich in intricate details — such as product photos or artwork. By using some custom code, you can enable your visitors to hover over and amplify specific parts of these images — all without having to move a muscle.

An image of pink, red and green boxes and watches is magnified on hover using custom code placed into a page’s custom code settings in the Webflow Designer.

This tutorial will guide you through the process of enlarging your images by inserting custom code into a page or a project by following these steps:

Insert the custom code
Assign a class name
Customize the magnifier


<script type="text/javascript" src="https://assets.website-files.com/5e2755779d8b8ea1d6373797/5ea88e92dce9b4b66f165490_zoom.txt"></script>
<script>
  jQuery(function(){

  if(!$.fn.imagezoomsl){

      $('.msg').show();
      return;
    }
    else $('.msg').hide();

    // plugin initialization
    $('.image').imagezoomsl({

      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [150, 150],
      // disables the scrolling of the document with the mouse wheel when the cursor is over the image
      disablewheel: false
    });
  });
</script>

Insert the custom code

There are two methods to insert the custom code into your project:

Include the code in the entire project
Integrate the code in an individual page

To insert the code into your entire project:

Access your project’s Settings
Select the Custom code tab
Insert the code into the Footer code section (e.g., “Before </body> tag”)
Click Save changes

Note: You can insert the code into your project using hotkeys Command + V (on Mac) or Control + V (on Windows).

The Custom code tab is selected in a project’s settings to show where custom code across a project can be placed.

The image magnification custom code should be placed in the Footer code section of the project’s settings, and Before the </body> tag.

To insert the code into an individual page:

Launch the Designer
Access the Pages panel and select the page settings cog icon of the desired page
Scroll to the Custom code section within the page settings
Insert the code into the Before </body> tag section
Click Save

Note: You can paste the code into your project using hotkeys Command + V (on Mac) or Control + V (on Windows).

To access a page’s settings, open the Pages panel and hover over the page to see a cog icon to click.

A page’s custom code settings are highlighted, specifically the Before </body> tag section.

You have successfully integrated the custom code into your project!

Assign a class name

Let’s assign a unique class name to the images that we want to apply the magnification effect to:

Select the Image you wish to magnify
Access the Style panel and click on the Selector field
Give it a class (e.g., “Magnify”)

The selector field of an image shows a new class of “Magnify” added to it.

Let’s include the “Magnify” class in our code:

Access the Pages panel and select the page settings cog icon of the page where your custom magnifier code is placed
Scroll to the Before </body> tag section in your page’s settings
Replace “.image” with your class name (e.g., “.magnify”)
Click Save

After inserting the code for image enlargement into the custom code of the page settings, ensure to modify the code to correspond to the newly defined “Magnify” class.

What are You Looking for?

Insert the custom code

Assign a class name

Customize the magnifying tool

Enlarge Image on Hover

Insert the custom code

Assign a class name

Customize the magnifying tool

Related Posts