css3 炫酷蒙版

CSS3 中可以使用伪元素 `::before` 和 `::after` 来实现蒙版效果，具体实现如下：

HTML 代码：

<div class="box">
  <img src="https://picsum.photos/400/300" alt="图片">
  <div class="mask"></div>
</div>

CSS 代码：

.box {
  position: relative;
  width: 400px;
  height: 300px;
}
.box img {
  display: block;
  width: 100%;
  height: 100%;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 设置蒙版颜色和透明度 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 将蒙版元素的 z-index 属性设置为比图片元素低，避免挡住图片 */
  z-index: -1;
  /* 使用伪元素实现蒙版效果 */
  content: "";
}
.box:hover .mask {
  /* 鼠标悬停时设置蒙版透明度为 0，实现渐变效果 */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

上述代码实现了一个简单的图片蒙版效果，当鼠标悬停在图片上时，蒙版透明度会慢慢变为 0，实现了一个渐变效果。你可以根据自己的需求修改样式，实现更加炫酷的效果。