解决卡片Hover缩放时文字被图片遮挡的层级问题

问题根源是：图片通过transform: scale()放大时，堆叠层级会默认提升，导致上方的文字被覆盖。以下是两种可行的修复方案：

方案一：提升文字的堆叠层级 #

给文字元素设置定位属性和更高的z-index，确保文字始终处于图片上层：

.text1 {
  position: relative; /* z-index仅对定位元素生效 */
  z-index: 10; /* 数值大于图片默认层级即可 */
}

.cardzoom{
  transition: .3s;
}

.cardzoom:hover{
  transform: scale(1.1);
}

方案二：限制图片放大范围（裁剪溢出部分） #

给图片添加一个容器，通过overflow: hidden让图片放大时不会超出容器边界，避免遮挡外部文字：

修改后的HTML： #

<div style="margin-top: 50px;" class="container imgzoom">
  <div class="row d-flex justify-content-evenly">
    <div class="col-md-2">
      <p class="text1">Lisbon, Portugal</p>
      <div class="img-container">
        <img data-bs-toggle="modal" data-bs-target="#2" src="img/2.jpg" class="img-fluid cardzoom rounded-2" alt="">
      </div>
    </div>
  </div>
</div>

对应的CSS： #

.img-container {
  overflow: hidden;
  border-radius: 0.5rem; /* 与图片的rounded-2保持圆角一致 */
}

.cardzoom{
  transition: .3s;
  width: 100%; /* 确保图片占满容器 */
}

.cardzoom:hover{
  transform: scale(1.1);
}

方案对比： #

• 方案一：保留图片完整放大效果，文字始终可见，但图片放大后可能会超出父容器范围。
• 方案二：图片放大部分被容器裁剪，不会溢出遮挡，但无法看到完整的放大效果。

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