实现土豆网，鼠标经过生成的效果

问题：浏览土豆视频的时候，鼠标经过盒子，会产生灰色半透明盒子的遮罩。

想要模拟一下这个效果。

思路：

一个div盒子，放一个a链接，a链接里放一张图片；div盒子放一个mask盒子，mask盒子使用绝对定位，display默认none，设置背景图，背景图居中，背景色为灰色半透明；鼠标经过div盒子，mask盒子display属性改为block

代码：

/*css代码*/
.tupian {
            position: relative;
            width: 210px;
            height: 220px;
            margin: 100px auto;
        }
        /* 先准备一个灰色半透明的盒子，隐藏 */
        
        .mask {
            display: none;
            position: absolute;
            width: 222px;
            height: 220px;
            left: 0px;
            top: 0px;
            background: rgba(0, 0, 0, .3) url(./image/arr.png) no-repeat center center;
        }
        /* 鼠标经过，灰色半透明的盒子显示 */
        
        .tupian:hover .mask {
            display: block;
        }
/*html代码*/
<div class="tupian">
        <a href="#">
            <div class="mask"></div>
            <img src="./image/3.jpg" alt="">
        </a>
</div>

效果：