[高能]给盒子添加一个遮罩层让效果更高级

1 在盒子的前后或者后面利用伪元素添加一个遮罩层

2 利用定位将遮罩层定位上去

3 给遮罩层添加渐变

4 将遮罩层的透明度设置为0,让遮罩层隐藏

5 hover盒子让遮罩层显示,给hover的遮罩层的透明度设置为1

6 给遮罩层添加过渡,让体验更丝滑

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #ccc;
    }

    .pic {
      position: relative;
      width: 200px;
      height: 283px;
      margin: 100px auto;
    }

    .pic img {
      width: 100%;
    }

    .pic::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 100%;
      background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
      opacity: 0;
      transition: all 1s;
    }

    .pic:hover::before {
      opacity: 1;
    }