CSS实现鼠标移动到图片上显示遮罩层效果

要实现当鼠标移动到图片上时显示遮罩层的效果，可以使用CSS的伪类:hover来控制遮罩层的显示。以下是一个简单的实现示例：

HTML:

<div class="image-container">
  <img src="image.jpg" alt="示例图片">
  <div class="overlay"></div>
</div>

CSS:

.image-container {
  position: relative;
  width: 300px; /* 设置图片容器的宽度 */
  height: 200px; /* 设置图片容器的高度 */
}
 
.image-container img {
  width: 100%;
  height: auto;
  display: block;
}
 
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 遮罩层的颜色和透明度 */
  opacity: 0; /* 默认情况下遮罩层不可见 */
  transition: opacity 0.5s ease; /* 添加渐变效果 */
}
 
.image-container:hover .overlay {
  opacity: 1; /* 鼠标悬停时遮罩层可见 */
}

在这个示例中，.image-container 是包含图片和遮罩层的容器。.overlay 是遮罩层，默认情况下是不可见的（opacity: 0;）。当鼠标悬停在 .image-container 上时，.overlay 的 opacity 通过 transition 效果变为 1（完全可见）。