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

效果如下：

HTML：

   婚礼策划
   
状态：待完成

执行者：张三

截止日期：2020/03/15
   

CSS：

.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 ;
}

全部代码：

    
    


    .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 ;
    }



    婚礼策划
    
 状态：待完成

 执行者：张三

 截止日期：2020/03/15
    

总结

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