纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白必看)

效果如下：

实例1

实例2以实例1【婚礼策划】为例

HT ML ：

<div class=" IT emInWorks" >
   婚礼策划
   <div class=" ;m ask">
       状态：待完成< br >
       执行者：张三<br>
       截止日期：2020/03/15
   </div>
</div>

CSS：

/*外层div部分*/
.itemInWorks{
    width: 180px;
    h ei ght: 130px;
    border-radius:5px;/* 圆 角*/
    font- Size:  18px;
     font-weight : 600;
    color: d img rey;
    text-align:  center ;/*文字[婚礼策划]水平居中*/
    line-height: 50px;/*文字[婚礼策划]垂直居中*/
    background: url('image/works_image/4. jpg ');
    background-re PE at: no-repeat;
     background-size : 180px 130px;
    box -s hadow:  # 909090 0px 0px 10px;/*周围阴影*/
    /*以上根据个人的效果自定义*/
    overflow: hidden;
    position: relative;
}
/* 半 透明部分*/
.itemInWorks .mask{
    height:80px;
    width:172px;
    color: #f5 F1 e5;
    line-height: 23px;
    text-align: left;
    padding-left: 8px;
    border-radius:2px 2px 5px 5px;
    font-size: 14px;
    font-weight: 300;
    /*以上根据个人的效果自定义*/
    position: absolute;
    top:130px;/*鼠标不放时，半透明部分最高处离外层div顶端的 距离 */
    background-color:rgba(0,0,0,0.5);/*透明度*/
    transition:top 0.5s ease -i n-out;/* 改变 top属性，0.5秒完成，慢 开始 慢结束*/
}
.itemInWorks:hover .mask{
    top:50px ;/*鼠标放上时，滑动到的最高处离外层div顶端的距离*/
}

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .itemInWorks{
        width: 180px;
        height: 130px;
        border-radius:5px;
        font-size: 18px;
        font-weight: 600;
        color: dimgrey;
        text-align: center;
        line-height: 50px;
        background: url('image/works_image/4.jpg');
        background-repeat: no-repeat;
        background-size: 180px 130px;
        box-shadow: #909090 0px 0px 10px;
        overflow: hidden;
        position: relative;
    }
    /*半透明部分*/
    .itemInWorks .mask{
        height:80px;
        width:172px;
        color: #f5f1e5;
        line-height: 23px;
        text-align: left;
        padding-left: 8px;
        border-radius:2px 2px 5px 5px;
        font-size: 14px;
        font-weight: 300;
        position: absolute;
        top:130px;
        background-color:rgba(0,0,0,0.5);
        transition:top 0.5s ease-in-out;
    }
    .itemInWorks:hover .mask{
        top:50px ;
    }
</style>
<body>
<div class="itemInWorks" >
    婚礼策划
    <div class="mask">
        状态：待完成<br>
        执行者：张三<br>
        截止日期：2020/03/15
    </div>
</div>
</body>
</html>

总结

以上所述是小编给大家介绍的纯CSS实现鼠标放上滑动出半透明效果的文字说明( 新手小白必看)，希望对大家有所帮助！

总结

以上是为你收集整理的纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白必看) 全部内容，希望文章能够帮你解决纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白必看) 所遇到的问题。

如果觉得网站内容还不错，推荐好友。

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201016

更新时间：2023-04-27 阅读：28次

纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白 必看)

总结

纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白必看)