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 上）或 控制+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 上）或 控制+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

相關文章