如何使Overlay（覆盖层）在悬停图片容器前保持不可见？

需求说明 #

默认状态下.channel-picture-overlay保持不可见，当鼠标悬停在.channel-picture容器上时，显示该覆盖层。

完整CSS实现代码 #

/* 给父容器设置相对定位，作为覆盖层的定位参考 */
.channel-picture {
  position: relative;
  display: inline-block; /* 让容器宽度适配图片 */
}

/* 默认隐藏覆盖层 */
.channel-picture-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 半透明背景，可选 */
  color: white; /* 适配背景的文字颜色，可选 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0; /* 初始完全透明 */
  transition: opacity 0.3s ease; /* 添加平滑过渡动画 */
  pointer-events: none; /* 避免未显示时干扰鼠标交互，可选 */
}

/* 悬停父容器时显示覆盖层 */
.channel-picture:hover .channel-picture-overlay {
  opacity: 1;
  pointer-events: auto; /* 恢复鼠标交互，可选 */
}

/* 可选：调整覆盖层内元素样式 */
.channel-picture-overlay-image {
  width: 60px;
  border-radius: 50%; /* 圆形头像效果，可选 */
  margin-bottom: 8px;
}

.p1-overlay, .p2-overlay {
  margin: 4px 0;
  text-align: center;
}

代码说明 #

• .channel-picture设置position: relative，确保绝对定位的覆盖层能基于它铺满整个容器；display: inline-block让容器宽度自适应图片尺寸。
• .channel-picture-overlay默认通过opacity: 0隐藏，配合过渡动画让显示/隐藏过程更流畅；绝对定位属性保证它完全覆盖父容器。
• 通过.channel-picture:hover .channel-picture-overlay选择器，在父容器被悬停时将覆盖层透明度设为1，实现显示效果。
• 背景色、头像圆角等样式可根据实际需求调整。

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