DIVI WordPress图片hover缩放问题：图片溢出容器

嘿，我帮你梳理了下这个问题——你遇到的图片悬停缩放后溢出div的情况，主要是两个核心点没处理到位：父容器的溢出控制，还有Divi自带样式的优先级覆盖。下面给你具体的修复方案：

1. 给父容器添加溢出隐藏属性 #

你之前的代码只处理了图片的缩放动画，但没限制父容器的显示范围。给.et_portfolio_image加上overflow: hidden，就能把缩放后超出的部分隐藏起来：

.et_portfolio_image {
  overflow: hidden;
  display: block; /* 确保容器是块级元素，避免布局错位 */
}

2. 提升自定义CSS的优先级 #

Divi的默认模块样式可能会覆盖你的自定义代码，所以可以优化选择器权重，同时简化过渡属性（现代浏览器已经不需要前缀了）。完整的修复代码如下：

/* 基础样式：保证图片在容器内自适应 */
.et_portfolio_image img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
}

/* 悬停缩放效果 */
.et_portfolio_image:hover img {
  transform: scale(1.1);
}

/* 关键：隐藏溢出的图片部分 */
.et_portfolio_image {
  overflow: hidden;
  position: relative; /* 可选：如果模块有定位需求，加上这个更稳妥 */
}

3. 检查Divi模块的内置设置 #

有时候Divi的Portfolio模块自带内边距或者额外容器，你可以进入模块的「Design」选项卡，查看「Image」板块的设置，确认有没有和overflow相关的配置干扰你的自定义CSS。

如果还是没生效，建议用浏览器开发者工具（按F12）查看元素样式，确认你的自定义CSS是否成功加载，有没有被更高优先级的样式覆盖。

内容的提问来源于stack exchange，提问作者Tiger Digital