Image magnification on hover

Add a desktop and mobile-friendly magnifier for images on mouse hover using custom code.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Transcript
This video features an old UI. Updated version coming soon!

You might have images in your site that are filled with intricate details — for instance, product photos or artwork. With a little custom code, you can give your visitors the power to hover over and magnify portions of these images — and they won’t even have to lift a finger to do it. 

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.

In this lesson you’ll learn how to magnify your images by adding custom code to a page or a project doing the following: 

  1. Paste the custom code
  2. Add a class name
  3. Style the magnifier

Follow along and copy the custom code for this lesson.


<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],
      disablewheel: false
    });
  });
</script>

Paste the custom code

There are two ways you can paste the custom code into your project: 

  • Add the code to the entire project
  • Add the code to an individual page

To paste the code into your entire project:

  1. Go to your project’s Settings
  2. Choose the Custom code tab
  3. Paste the code into the Footer code section (e.g., “Before </body> tag”)
  4. Click Save changes
Note: You can paste the code into your project using shortcut keys 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 paste the code into an individual page: 

  1. Open the Designer
  2. Open the Pages panel and click the page settings cog icon of the page you want to affect
  3. Scroll down to the Custom code section of the page settings
  4. Paste the code into the Before </body> tag section
  5. Click Save
Note: You can paste the code into your project using shortcut keys 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've successfully pasted the custom code into your project!

Add a class name

Let’s add a unique class name to the images we want to receive the magnification effect:

  1. Select the Image you want to magnify
  2. Open the Style panel and click into the Selector field
  3. Give it a class (e.g., “Magnify”) 
The selector field of an image shows a new class of “Magnify” added to it.

Let’s add the “Magnify” class to our code: 

  1. Open the Pages panel and click the page settings cog icon of the page containing your custom magnifier code
  2. Scroll to the Before </body> tag section in your page’s settings
  3. Replace “.image” with your class name (eg., “.magnify”) 
  4. Click Save

<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
    $('.magnify').imagezoomsl({
 
      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [150, 150],
      disablewheel: false
    });
  });
</script>
After adding the image magnification code to the page’s custom code in page settings, you need to update the code to reflect the custom “Magnify” class you have just created.
Pro tip: Instead of recreating or duplicating classes within an existing project, you can use a Global class or a Combo class to create a unique class for images you want to magnify. Just make sure your unique magnification class name has been added to your custom code following the steps above. Read more about Global classes and Combo classes

Publish your project and visit your live site to see your custom code in action. Hover over the image you’ve added the class name to (e.g., images with the class name “Magnify”) and you’ll see a magnifier following your mouse position as you move it over the image. 

Style the magnifier

By default, the magnifier is a 150 by 150 pixel square shape. Let’s change its size and shape, and give it a drop shadow. 

Out of the box, our custom code sets the magnifier size to 150 by 150 pixels. Let’s make it larger:

  1. Open the Pages panel and click the page settings cog icon of the page containing your custom magnifier code
  2. Scroll to the Before </body> tag section in your page’s settings and locate the “magnifiersize: [150, 150]” section of code
  3. Change each 150 pixel value to a larger value (e.g., 300 pixels for each)
  4. Click Save

<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
    $('.magnify').imagezoomsl({
 
      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [300, 300],
      disablewheel: false
    });
  });
</script>
To change the size of the magnifier, you need to update the pixel values in the magnifier size area of the custom code within the page’s settings.

Let’s change the magnifier shape from a square to a circle by setting a style foundation on a new Div block

  1. Open the Navigator and select the Body element
  2. Use Quick find to add a Div block as the last element on the page
  3. Select the Div block, open the Style panel and click into the Selector field
  4. Give the Div block a class name so the custom code can recognize the new magnifier shape (e.g., “round-loope”)
  5. Open Style panel > Borders and set a Radius of 50% 

The Div block may appear oval at this point, but the custom code controls the size of the magnifier — the 300 pixels you set earlier.

Pro tip: Press Command + E (on Mac) and Control + E (on Windows) to open Quick find and quickly add elements to your project. 
The selector field of the styled Div block shows a new class of “round-loope” added to it.
The Border radius of the “round-loope” Div block is set to 50%. 

To give the magnifier more dimension, let’s add a drop shadow behind it:

  1. Select the Div block
  2. Open Style panel > Effects
  3. Add a Box shadow by clicking the plus icon, and style the shadow to your liking

Because our “round-loope” Div block is only being used to affect our magnifier’s styling, we don’t actually want the Div block to be visible on our page. Let’s hide it from view: 

  1. Select the “round-loope” Div block
  2. Open Style panel > Layout
  3. Set Display to none 
  4. Publish the project and visit your site to preview the newly styled magnifier
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.

The magnifier also works on mobile devices. You can tap on the image to get a closer look when using devices like tablets and smartphones. 

An image of pink, red and green boxes and watches is magnified on mobile devices when portions of the image are tapped. This is accomplished by using custom code placed into a page’s custom code settings in the Webflow Designer.

Congratulations! You’ve just magnified your images’ possibilities! 

Clone this project
Try Webflow — it's free
This video features an old UI. Updated version coming soon!