CSS实现图片悬停缩放不溢出容器 避免覆盖下方黑色div

缩放溢出遮挡文本的核心原因有两点：

• 直接对.body-selection-item-image元素本身应用transform: scale()时，整个元素的渲染盒（包括自身的溢出裁剪边界）会同步缩放，元素自身设置的overflow: hidden无法裁掉放大产生的溢出内容
• 应用了transform的元素会自动创建高层级的层叠上下文，层级高于普通流中的兄弟元素，因此图片溢出自身高度的部分会覆盖在后方同级的黑色文本块上；外层容器的overflow: hidden只能裁剪超出外层容器总范围的内容，无法裁剪容器内部、图片自身边界外的溢出。

利用现有不透明黑色文本块遮挡图片下半部分溢出，同时让外层容器裁剪其他方向的溢出，只需要给文本块增加相对定位和更高层级即可：

.body-selection-item-text {
  /* 新增下面两行 */
  position: relative;
  z-index: 1;
  /* 原有样式保留 */
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0.5em;
  background: #1f1f1f;
  color: #fff;
}

这个方案适配当前纯黑不透明文本场景，代码改动量最小，效果符合预期。

如果后续需要修改文本块透明度、或者需要严格保证图片仅在自身区域内缩放，推荐使用这个方案：将缩放效果转移到图片容器的伪元素上，由图片容器本身负责裁剪溢出，不需要大幅修改HTML结构，只需要调整CSS即可。

如果背景图是CMS动态输出的行内样式，可以把行内的背景图写法稍作修改，用CSS变量传递即可：把原来的style="background-image:url(xxx)"改成style="--img:url(xxx)"

最终完整CSS代码如下：

.cms-section-default.boxed [class*="cms-element"] {
  border-radius: 3px;
}

.body-selection-item {
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.8em 0.5em 0.2em 0.5em;
  text-align: center;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background-color: white;
  border: 1px solid #b2b2b2;
}

/* 改为hover时触发伪元素缩放 */
.body-selection-item-image:hover::after {
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.body-selection-item-image {
  position: relative; /* 给伪元素提供定位基准 */
  overflow: hidden; /* 裁剪伪元素超出容器的部分 */
  height: 15rem;
  width: 100%;
}

/* 伪元素承载背景图和缩放动画 */
.body-selection-item-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: var(--img); /* 读取行内传入的CSS变量背景图 */
  transition: -ms-transform .5s ease;
  transition: -webkit-transform .5s ease;
  transition: transform .5s ease;
  -webkit-transition: -webkit-transform .5s ease;
}

.body-selection-item-text {
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0.5em;
  background: #1f1f1f;
  color: #fff;
}

对应的HTML行内样式部分只需要做极小调整，把背景图存在CSS变量里即可：

<div class="cms-element-text">
  <div class="body-selection-item">
    <a title="Ttile" href="#">
      <!-- 把原来的background-image改成CSS变量--img传入 -->
      <div style="--img:url(https://images.unsplash.com/photo-1657053543559-5845ec792c0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3351&q=80);" class="body-selection-item-image"></div>
      <div class="body-selection-item-text">MY TEXT-BOX</div>
    </a>
  </div>
</div>

这个方案下，图片放大的所有溢出内容都会被自身容器严格裁剪，完全不会影响其他元素，不管文本块是什么样式都不会出现遮挡问题。

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