CSS：
/*外层div部分*/
.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;/*鼠标不放时，半透明部分最高处离外层div顶端的距离*/
background-color:rgba(0,0,0,0.5);/*透明度*/
transition:top 0.5s ease-in-out;/*改变top属性，0.5秒完成，慢开始慢结束*/
}
.itemInWorks:hover .mask{
top:50px ;/*鼠标放上时，滑动到的最高处离外层div顶端的距离*/
}全部代码：