遮罩层

拥一个盒子（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;
}

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

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