CSS 鼠标悬浮在图片上添加遮罩层效果的实现

想要在鼠标悬浮在图片上时添加遮罩层效果，可以借助CSS的伪类选择器和定位属性来实现。具体步骤如下：

想要在鼠标悬浮在图片上时添加遮罩层效果，可以借助CSS的伪类选择器和定位属性来实现。具体步骤如下：

1. HTML结构

首先，需要在HTML中为图片添加一个容器，例如：

<div class="img-container">
  <img src="your-image-src">
  <div class="overlay"></div>
</div>

其中，img-container是图片和遮罩层的容器，overlay是遮罩层，初始状态下可以设置为透明色。

1. CSS样式

接下来，在CSS中为容器和遮罩层添加样式，例如：

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

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

其中，img-container的position属性设置为relative是为了保证overlay的position:absolute属性相对于img-container进行定位，display:inline-block则是为了实现类似图片一样的行内块显示。而overlay则被设置为绝对定位，top和left属性为0表示完全覆盖在图片上，width和height为100%则表示覆盖整个容器，background-color为遮罩层颜色，opacity初始状态为0是为了隐藏遮罩层。然后在img-container伪类:hover下调整overlay的opacity为1，表示鼠标悬浮时显示遮罩层。

效果示例1：使用纯CSS实现遮罩层效果

参考代码：https://codepen.io/urain39/pen/bGWXpem

效果示例2：在遮罩层中添加文字和按钮

参考代码：https://codepen.io/urain39/pen/RwGJPNy

在实际应用中，可以根据实际需求调整遮罩层效果、样式和内容等，添加更多交互效果，使页面更加丰富多彩。