效果如下:
HTML:
<div class="itemInWorks" > 婚礼策划 <div class="mask"> 状态:待完成<br> 执行者:张三<br> 截止日期:2020/03/15 </div> </div>
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顶端的距离*/ }
全部代码:
<!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实现鼠标放上滑动出半透明效果的文字说明(新手小白 必看),希望对大家有所帮助!
我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实现, 首先要创建...
引子 由于个人的想法,想到了插件的扩展,找资源时,感觉还是去看官方的文档,顺...
前言 最近在做项目的时候发现,在公司电脑上没问题,在自己电脑上确有问题。做的...
近期在学习有关响应式设计的内容,对此做了些整理,部分图片来源于网络。 1、为...
本文主要对 ::master 伪元素、 list-item 下的 list-style-image 、 list-style-...
NO.1 前言 Tooltips常被称为 提示框(或信息提示框) ,提示框能够以较强的交互...
通过右键查看源文件发现如下代码: 1、firefox下可以通过css来禁止选择复制功能 C...
简介: 云计算情报局第10期,阿里云产品专家云觉对新产品——视图计算的产品设计...
做一个网页就先要做一个标题,一个好标题会让网页让人印象深刻,有动态的标题会...
前言 前端实现的水印基本都是不安全的,可被破解的~.~ 水印 水印(watermark)是...