css hover 蒙层

要实现 CSS hover 蒙层效果，可以使用以下方式：

1. 使用绝对定位的伪元素作为蒙层：

<div class="container">
  <img src="image.jpg" alt="image">
  <div class="overlay"></div>
</div>

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  opacity: 0; /* 默认不显示 */
  transition: opacity 0.3s ease-out; /* 过渡效果 */
}

.container:hover .overlay {
  opacity: 1; /* 鼠标悬浮时显示 */
}

2. 使用背景图像和 linear-gradient 实现蒙层：

<div class="container">
  <div class="overlay"></div>
</div>

.container {
  background-image: url("image.jpg");
  background-size: cover;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); /* 半透明黑色 */
  opacity: 0; /* 默认不显示 */
  transition: opacity 0.3s ease-out; /* 过渡效果 */
}

.container:hover .overlay {
  opacity: 1; /* 鼠标悬浮时显示 */
}