鼠标放上去会出现遮罩层并且图片放大

1. 先给父盒子设置宽高
2. 父盒子里边添加图片
3. 给遮罩层的子盒子设置子绝父相，并且设置遮罩层的透明度
4. 给图片设置过渡效果，是鼠标放上去会有放大效果做铺垫
5. 鼠标放上去会有遮罩并且放大（一定记得兄弟盒子之间要用 + ）

css内容

<style>
        .img_div {
            margin: 50px auto;
            position: relative;
            overflow: hidden;
            width: 268px;
            height: 268px;
        }
        
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 268px;
            height: 268px;
            background: rgba(95, 230, 240, 0.6);
            display: none;
            z-index: 1;
        }
        
        .img_div img {
            transition: all 0.4s;
        }
        
        .img_div:hover .mask {
            display: block;
        }
        .mask:hover+img {
            transform: scale(1.1);
        }
</style>

html代码段

<div class="img_div">
        <div class="mask"></div>
        <img src="./家居03/img/03img/3.png">
</div>