Elementor教程：解决图像模块放大效果溢出问题

在Elementor中，使用图像模块时，我们常常希望为图像添加鼠标悬停时的放大效果（hover效果）。然而，这种效果在放大图片时，可能会导致图片溢出原本的容器，影响页面布局。今天的教程将帮助你解决这个问题，确保在图片放大时，溢出的部分被隐藏，保持页面整洁。

Table of Contents

为图像添加放大效果
- 在Elementor编辑器中，选择你需要添加放大效果的图像模块。
- 进入“高级”选项卡，在“自定义CSS”区域中添加以下CSS代码：
```
.elementor-widget-image:hover img {
    transform: scale(1.1); /* 控制图片放大的比例 */
    transition: transform 0.3s ease; /* 平滑过渡效果 */
}

.elementor-widget-image {
    overflow: hidden; /* 确保容器本身也隐藏溢出的部分 */
}
```
- 这里的代码做了两件事：
  - 使用 transform: scale(1.1) 来实现图片的放大效果。
  - transition: transform 0.3s ease 为放大效果添加平滑过渡，使用户体验更流畅。
  - overflow: hidden 确保图片容器在放大时不会溢出，保持页面整洁。
在WordPress中应用全局CSS
- 如果你希望这个效果在网站的所有图像模块中生效，可以将上述CSS代码添加到WordPress的全局CSS中。
  - 在WordPress后台，转到 外观 > 自定义 > 额外CSS。
  - 将上面的CSS代码粘贴到“额外CSS”区域，并保存更改。