蒙版

话不多说直接上代码

 

style>
        .box1{
            width: 1334px;
            height: 750px;
            border: 1px solid #5bc0de;
            position: relative;
            overflow: hidden;
        }
        .box1>img{
            position: absolute;
            top:0;
            left: 0;
        }
        .box1>div{
            width: 100%;
            height: 200px;
            background-color: rgba(2,3,3,.3);
            position: absolute;
            bottom:0;
            left: 0;
            transition: all linear .9s;
            color: #fff;
        }
        .box1:hover .mb{
            bottom: -200px;
        }
    </style>

<div class="box1">
    <img src="img-0cab70d9fd443c450849350a168c4b4f.jpg" alt="你想把我灌醉吗"/>
    <div class="mb">你把我灌醉，啤酒有点贵</div>
</div>
效果图

转载于:https://www.cnblogs.com/koubazhuanshu/p/6918216.html