遮罩层

原理

使用了元素的display属性，通过遮罩层父组件的hover更改遮罩层的display属性

构建底层

• 先建立一个居中的盒子
• 再插入图片
• 使得图片大小与盒子一致

<div class="tudou">
   <img src="https://r1.ykimg.com/050C00005E872CA81B6A8D09B30C0217" alt="">
</div>

.tudou {
  width: 444px;
  height: 320px;
  background-color: rosybrown;
  margin: 100px auto;
}
.tudou img {
  width: 100%;
  height: 100%;
}

构建遮罩层

• 在盒子内部加入遮罩层mask
• 将盒子设为相对定位
• 将遮罩层设置绝对定位

<div class="tudou">
    <div class="mask"></div>
    <img src="https://r1.ykimg.com/050C00005E872CA81B6A8D09B30C0217" alt="">
</div>

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
}

隐藏

将遮罩层样式加入display: none,实现隐藏

.mask {
  display: none;
  ...
}

显示

在盒子hover下的遮罩层，将display设为block

.tudou:hover .mask {
  display: block;
}