介绍 & lt; div 类=癷temInWorks",在
,,婚礼策划
,,& lt; div 类=癿ask"比;
,,,,,,状态:待完成& lt; br>
,,,,,,执行者:张三& lt; br>
,,,,,,截止日期:2020/03/15
,,& lt;/div>
& lt;/div> CSS: /*外层div部分*/.itemInWorks {
,,,宽度:,180 px;
,,,身高:,130 px;
,,,这个特性:5 px;/*圆角*/,,,字体大小:,18 px;
,,,粗细:,600;
,,,颜色:,dimgrey;
,,,text-align:,中心;/*文字“婚礼策划“水平居中*/,,,行高:,50 px;/*文字“婚礼策划“垂直居中*/,,,背景:,url(& # 39;图像/works_image/4. jpg # 39;);
,,,平铺方式:,不再重演;
,,,background-size:, 180 px 130 px;
,,,不必:,# 909090,0 px 0 px 10 px;/*周围阴影*/,,,/*以上根据个人的效果自定义*/,,,溢出:,隐藏;
,,,位置:,相对;
}/*半透明部分*/.itemInWorks .mask {
,,,身高:80 px;
,,,宽度:172 px;
,,,颜色:,# f5f1e5;
,,,行高:,23 px;
,,,text-align:,;
,,,padding-left:, 8 px;
,,,这个特性:2 px 2 px 5 px 5 px;
,,,字体大小:,14 px;
,,,粗细:,300;
,,,/*以上根据个人的效果自定义*/,,,位置:,绝对;
,,,:130 px;/*鼠标不放时,半透明部分最高处离外层div顶端的距离*/,,,背景颜色:rgba(0, 0, 0, 0.5);/*透明度*/,,,的转变:top 0.5 s ease-in-out;/*改变前属性,0.5秒完成,慢开始慢结束*/}
.itemInWorks: hover .mask {
,,,:50 px ;/*鼠标放上时,滑动到的最高处离外层div顶端的距离*/} & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title> Title
& lt;/head>
& lt; style>
,,,.itemInWorks {
,,,,,,,宽度:,180 px;
,,,,,,,身高:,130 px;
,,,,,,,这个特性:5 px;
,,,,,,,字体大小:,18 px;
,,,,,,,粗细:,600;
,,,,,,,颜色:,dimgrey;
,,,,,,,text-align:,中心;
,,,,,,,行高:,50 px;
,,,,,,,背景:,url(& # 39;图像/works_image/4. jpg # 39;);
,,,,,,,平铺方式:,不再重演;
,,,,,,,background-size:, 180 px 130 px;
,,,,,,,不必:,# 909090,0 px 0 px 10 px;
,,,,,,,溢出:,隐藏;
,,,,,,,位置:,相对;
,,,}
,,,/*半透明部分*/,,,.itemInWorks .mask {
,,,,,,,身高:80 px;
,,,,,,,宽度:172 px;
,,,,,,,颜色:,# f5f1e5;
,,,,,,,行高:,23 px;
,,,,,,,text-align:,;
,,,,,,,padding-left:, 8 px;
,,,,,,,这个特性:2 px 2 px 5 px 5 px;
,,,,,,,字体大小:,14 px;
,,,,,,,粗细:,300;
,,,,,,,位置:,绝对;
,,,,,,,:130 px;
,,,,,,,背景颜色:rgba (0, 0, 0, 0.5);
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关纯CSS如何实现鼠标放上滑动出半透明效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<>强效果如下:
<图类="图像"> 
实例1
<图类="图像"> 
实例2以实例1【婚礼策划】为例HTML:
<>强全部代码:
