CSS3图片悬停缩放时半透明遮罩失效问题求助

问题根源 #

1. 遮罩伪元素依赖background-color: inherit，但父元素初始无背景色，hover时才添加，导致过渡效果不连贯，且层级未正确设置，遮挡了图片交互。
2. 图片缩放的触发条件是service-image:hover或box-text:hover+.service-image，与遮罩依赖的box-item:hover触发逻辑不一致，引发冲突。
3. 伪元素未设置z-index，无法处于图片和文本之间的合理层级。

修改步骤 #

• 统一hover触发逻辑：将图片缩放和遮罩显示的触发条件统一为父元素.box-item:hover，避免交互冲突。
• 调整遮罩伪元素样式：初始设置background-color: rgba(0,0,0,0)，hover时切换为半透明深色，同时设置z-index: 1，确保在图片之上、文本之下（文本z-index:999保持不变）。
• 优化过渡效果：给图片和伪元素分别添加过渡属性，保证动画流畅。
• 清理冗余代码：删除重复的.box-text样式定义，合并重复规则。

修改后的完整代码 #

CSS

/* 合并重复的容器宽度规则 */
.grid_container > .box-item,
.grid_container > .box-itemw {
  width: 100%;
}

.box-item img,
.box-itemw img {
  width: 100%;
  transition: transform 1s ease; /* 给图片单独设置过渡 */
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* 补全前缀连字符 */
  color: var(--white);
  font-size: 20px;
  z-index: 999;
}

.grid_container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 5px;
}

.grid_container > .box-item {
  position: relative;
  align-content: flex-start;
  width: calc(33.33% - 40px);
}

.grid_container > .box-itemw {
  position: relative;
  align-content: flex-start;
  width: calc(100% - 40px);
}

.box-item,
.box-itemw {
  position: relative;
  display: inline-block;
  max-height: 300px;
  max-width: 100%;
  overflow: hidden;
}

/* 父元素hover时触发图片缩放 */
.box-item:hover .service-image {
  transform: scale(1.1);
}

.box-item:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0); /* 初始透明 */
  content: '';
  z-index: 1; /* 层级在图片之上，文本之下 */
  transition: background-color 0.5s ease; /* 遮罩过渡动画 */
}

/* hover时显示半透明遮罩 */
.box-item:hover:before {
  background-color: rgba(0, 0, 0, 0.5);
}

HTML

<div class="grid_container">
  <div class="box-item">
    <img src="https://placehold.co/600x400" class="service-image" alt="travel 1">
    <div class="box-text">
      dummy text
    </div>
  </div>
</div>

效果说明 #

• 鼠标悬停在.box-item区域（含图片和文本）时，图片平滑缩放1.1倍，同时显示半透明深色遮罩。
• 文本始终处于最上层，尺寸和位置不受缩放、遮罩影响。
• 所有过渡动画流畅无冲突。

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