css鼠标悬浮出现遮罩层，鼠标离开遮罩层收起

你可以使用CSS的:hover伪类和transition属性来实现鼠标悬浮出现遮罩层，鼠标离开遮罩层收起的效果。以下是一种实现方法：

HTML部分：

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

CSS部分：

.image-container {
  position: relative;
  display: inline-block;
}

.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;
}

.image-container:hover .overlay {
  opacity: 1;
}

这段代码中，我们首先创建一个包含图片和遮罩层的容器，使用相对定位（position: relative）使遮罩层相对于容器进行定位。遮罩层使用绝对定位（position: absolute）使其覆盖在图片上方，并设置宽度和高度为100%以填满容器。

遮罩层的背景色使用rgba()函数设置，其中最后一个参数表示透明度。初始时设置透明度为0，即完全透明。使用transition属性设置过渡效果，让透明度的变化在0.3秒内平滑进行。

接下来使用:hover伪类选择器，当鼠标悬浮在.image-container容器上时，.overlay遮罩层的透明度设置为1，即完全不透明。这样就实现了鼠标悬浮出现遮罩层的效果。

请注意，这只是一种基本的实现方式，你可以根据需要进行样式的调整和扩展。