css图片悬停添加蒙版和文字

稻草人想看远方

已于 2022-10-02 15:55:31 修改

阅读量749

点赞数

分类专栏：前端文章标签： css html 前端

于 2022-10-02 15:54:59 首次发布

本文链接：https://blog.csdn.net/weixin_52831324/article/details/127143560

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

效果图：

效果图（hover悬停）

代码如下：

html：

<div class="box">
            <img src="https://images.pexels.com/photos/19872/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="box_img"/>
            <div class="inside">
                <span class="word">长城</span>
                <span >长城长城长城长城长城长城</span>
            </div>
</div>

css：

    .box{
        position: relative;
        width: 860px;
        height: 573px;
        overflow: hidden;
    }
    .box_img{
        width: 860px;
        height: 573px;
        position: absolute;
        transition: all .5s;
    }
    .box:hover .box_img{
        transform: scale(1.05);
        transition: all .5s;
    }
    .inside{
        overflow: hidden;
        width: 860px;
        height: 573px;
        position: absolute;
        background: rgb(85, 85, 85,0);
        transition: all 0.5s;
        letter-spacing:1px
    }
    .inside:hover {
        background: rgb(85, 85, 85,0.4);
        transition: all 0.5s;
    }
    .inside span{
        margin-left: 10px;
        color: #ffffff;
        font-size: 19px;
        font-weight: bold;
        display: block;
    }
    .word{
        margin-top: 540px;
        transition: all 0.5s;
        margin-bottom: 20px;
    }
    .box:hover .word{
        margin-top: 490px;
        transition: all 0.5s;
    }