html位置插入透明动画文字,鼠标放上去，图片上方动态显示半透明说明文字（源码）...

鼠标放上去，图片上方动态显示半透明说明文字(源码)|www.125jz.com

.itemInWorks{

width: 240px;

height: 150px;

border-radius:5px;

font-size: 20px;

font-weight: 600;

color: #FFFFFF;

text-align: center;

line-height: 40px;

background: url(http://www.125jz.com/wp-content/uploads/2018/04/10.png);

background-repeat: no-repeat;

background-size: 240px 150px;

box-shadow: #909090 0px 0px 10px;

overflow: hidden;

position: relative;

}

/*半透明部分*/

.itemInWorks .mask{

height:60px;

width:232px;

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:150px;

background-color:rgba(0,0,0,0.5);

transition:top 0.5s ease-in-out;

}

.itemInWorks:hover .mask{

top:90px ;

}

网页设计

www.125jz.com

日期：2022/02/14

提示：你可以先修改部分代码再运行。