CSS实现卡片hover显示透明内层卡片的解决方案

你不需要引入透明图片来实现透出效果，核心通过CSS定位+半透明背景属性即可实现，具体操作如下：

核心实现逻辑 #

• 给外层卡片设置相对定位，作为内部叠层的定位基准
• hover触发的浮层设置为绝对定位，铺满整个外层卡片，默认隐藏
• 浮层使用rgba格式的半透明背景，不需要依赖透明图片资源，即可透出下层内容
• 外层卡片hover时，控制浮层显示，可选择性给下层内容加轻微模糊效果匹配参考气质感

代码实现 #

你现有的HTML结构不需要大幅调整，补充对应CSS即可：

/* 外层卡片基础配置 */
.card.Fast-Growing {
  position: relative;
  overflow: hidden;
  /* 保留你原本写的卡片宽高、圆角、阴影、背景图等样式即可 */
}

/* hover浮层默认样式 */
.card.Fast-Growing-hovered {
  position: absolute;
  /*  inset:0 等同于top/right/bottom/left全设为0，铺满父容器 */
  inset: 0;
  opacity: 0;
  z-index: 9;
  /* 半透明白色背景，最后一个参数是透明度，0-1之间可自行调整 */
  background: rgba(255, 255, 255, 0.75);
  /* 让浮层内文字居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 加过渡动画让效果更顺滑 */
  transition: opacity 0.2s ease;
}

/* 外层卡片hover时显示浮层 */
.card.Fast-Growing:hover .Fast-Growing-hovered {
  opacity: 1;
}

/* 可选：hover时给原卡片内容加轻微模糊，更贴合参考图的透出效果 */
.card.Fast-Growing:hover > :not(.Fast-Growing-hovered) {
  filter: blur(1.5px);
  transition: filter 0.2s ease;
}

效果参考 #

• 悬停前效果：
• 悬停后效果：

注意：如果你的浮层需要展示额外的按钮、描述内容，直接写在Fast-Growing-hovered这个div内部即可，会自动居中展示在半透明浮层上。

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