Enlarge Image on Hover - Webflow Blog & Resources

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 设置
选择 自定义代码 标签
Insert the code into the 页脚代码 section (e.g., “Before </body> tag”)
点击 保存更改

笔记： You can insert the code into your project using hotkeys 命令 + V （在 Mac 上）或 Control + V （在 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> 标签。

To insert the code into an individual page:

启动 设计师
访问 页面面板 and select the page settings cog icon of the desired page
滚动到 自定义代码 section within the page settings
Insert the code into the 前 </body> 标签 部分
点击节省

笔记： You can paste the code into your project using hotkeys 命令 + V （在 Mac 上）或 Control + V （在 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:

选择图像 you wish to magnify
访问 样式面板 并点击 选择器字段
Give it a 班级 (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:

访问 页面面板 and select the page settings cog icon of the page where your custom magnifier code is placed
滚动到 前 </body> 标签 section in your page’s settings
Replace “.图像” with your class name (e.g., “.magnify”）
点击节省

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.

你要买什么？

悬停时放大图像

Insert the custom code

Assign a class name

Customize the magnifying tool

悬停时放大图像

Insert the custom code

Assign a class name

Customize the magnifying tool

相关文章