拥一个盒子(img-mark)作为遮罩层,当鼠标悬停到图上时,页面会出现一个半透明效果(以半透明的效果盖住图片)

<div class="box"> 
  <img src="./img/eye.jpg" alt=""> 
  <div class="img-mark">img</div> 
</div>

css样式:

* {
  padding: 0;
  margin: 0;
}
.box {
  width: 384px;
  height: 216px;
  /* 遮盖文字 */
  overflow: hidden;
  margin: 20px auto;
  position: relative;
}
img {
  width: 100%;
}
.box:hover .img-mark {
  width: 384px;
  height: 216px;
  line-height: 216px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}

代码演示:当鼠标在图片上时会出现半透明效果

202101111610334450201103

css样式也可以这样写:

.img-mark {
  width: 384px;
  height: 216px;
  line-height: 216px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  /* 透明度 */
  opacity: 0;
  /* css3过渡时间效果 */
  transition: all 0.8s ease;
}

.box:hover .img-mark {
  opacity: 1;
}