纯CSS实现项目展示遮罩详情效果
本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果，遮罩采用CSS的绝对定位以及CSS3盒子模型。
本实例应用广泛，很多品牌官方网站均有采用。
hover：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>纯CSS实现项目展示遮罩详情效果</title>
<link rel="shortcut icon" href="http://www.cdtu6129.cn/img/favicon.ico" type="image/x-icon">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*外壳*/
.wrap {
width: 200px;
height: 200px;
margin: 200px auto;
/*为遮罩层设置父元素定位*/
position: relative;
overflow: hidden;
}
/*项目*/
.iteam {
width: 200px;
height: 200px;
overflow: hidden;
float: left;
}
/*项目图片*/
.iteam img{
width: 200px;
height: 200px;
}
/*项目图片被hover后遮罩的display属性设置为block*/
.iteam:hover+.shade {
display: block;
}
/*遮罩*/
.shade {
width: 200px;
height: 200px;
padding: 10px;
color: #FFFFFF;
background: #000;
opacity: 0.6;
/*相对父元素外壳定位*/
position: absolute;
left: 0px;
top: 0px;
/*解决hover后图片闪动问题*/
pointer-events: none;
/*防止设置padding后影响盒子大小*/
box-sizing: border-box;
float: left;
display: none;
/*遮罩置于顶层*/
z-index: 999;
} .shade h3 {
text-align: center;
line-height: 50px;
}
</style>
</head> <body>
<!--外壳-->
<div class="wrap">
<!--项目-->
<div class="iteam">
<img src="http://cnblogs.cdtu6129.cn/img/TT.JPG" />
</div>
<!--遮罩-->
<div class="shade">
<h3>Tizzy T</h3>
<p>本名谢锐韬，中国内地嘻哈说唱男歌手。2010年获得华南地区Beat Box冠军。2016年推出首张个人专辑《你的男孩》。</p>
</div>
</div> </body> </html>
如有不足，欢迎指出。
纯CSS实现项目展示遮罩详情效果的更多相关文章
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- 纯CSS实现各类气球泡泡对话框效果
原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...
- 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 纯js和纯css+html制作的手风琴的效果
一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 纯css 实现 三角形、梯形等 效果
今天一个刚开始学习html 的小白问我一个问题,css 可以实现正方形,长方形,和圆型(border-radius),怎么能做出个三角形.梯形等等形状呢?于是我便开启了装逼模式, 给他讲解了一下我的思 ...
- 纯 css column 布局实现瀑布流效果
原理 CSS property: columns.CSS属性 columns 用来设置元素的列宽和列数. 兼容性 chrome 50+ IE 10+ android browser 2.1+ with ...
随机推荐
- c# 动态加载tlb为程序集
private enum RegKind { RegKind_Default = , RegKind_Register = , RegKind_None = } [DllImport("ol ...
- 聊聊NTLM认证协议
近期发现多家安全媒体发布NTLM协议漏洞的文章.他们越说越术语,越说越官方,如此这般下去,他们写出来到底给谁看?大雅就是俗,让我来一篇俗文.啥是NTLM呢?微软windows系统的用户账号存储密码哈希 ...
- Redis进阶:Redis的持久化机制
Redis进阶:Redis的持久化机制 Redis的持久化机制目前包括RBD和AOF两种方式. RDB持久化 RDB持久化方式是在指定的时间间隔对数据进行快照存储.过期的键值不会被存储到快照中.如果恢 ...
- 项目被os x占用
xattr -d com.apple.FinderInfo 空格后拖入项目回车就行了
- Vue源码详细解析:transclude,compile,link,依赖,批处理...一网打尽，全解析!
用了Vue很久了,最近决定系统性的看看Vue的源码,相信看源码的同学不在少数,但是看的时候却发现挺有难度,Vue虽然足够精简,但是怎么说现在也有10k行的代码量了,深入进去逐行查看的时候感觉内容庞杂并 ...
- 不用找了，300 分钟帮你搞定 Spring Cloud！
最近几年,微服务架构一跃成为 IT 领域炙手可热的话题,大量一线互联网公司因为庞大的业务体量和业务需求,纷纷投入了微服务架构的建设中,像阿里巴巴.百度.美团等大厂,很早就已经开始了微服务的实践和应用. ...
- 网页中<a>标签新窗口和location.href 新窗口打开
在网页制作过程中,经常遇到新窗口打开,一般是a超级链接或者location.href 新窗口打开形式,下面分别讲述两种之间的不同方式 1,a标签 新窗口 添加属性 target="_blan ...
- usleep和sleep
usleep 和 sleep 都是用于将进程挂起, 所不同的是前者在微秒级别, 后者在秒级别.
- JavaScript基础8——弹窗案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS利用border绘制图性
绘制梯形 width:10px; border-top:10px solid red; border-right:10px solid transparent; border-left:10px so ...