纯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 ...
随机推荐
- 16/7/7_PHP-构造\解析函数
昨天又问老师问题,老师还是强调要用博客之类记录下每天的学习的习惯. 我个人的想法是一些知识点不用笔记一下 在脑海的理解不是太深.但是老师都这么说了我老师乖乖的记录下今天的学习的一些知识.心得.技巧等等 ...
- git的忽略文件语法规范
忽略文件语法规范 空行或是以 # 开头的行即注释行将被忽略. 可以在前面添加正斜杠 / 忽略当前路径文件,但不包括子目录的同名文件. 可以在后面添加正斜杠 / 来忽略文件夹. 可以使用 ! 来否定忽略 ...
- char数组初始化
初始化 char str[10]="Hello"; char str[10]={'H','e','l','l','o','\0'}; char str[10]={'H'}; cha ...
- 数组的includes方法
Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似.该方法属于 ES7 ,但 Babel 转码器已经支持. [1, 2 ...
- Tomcat控制台
一般在安装完成Tomcat之后,我们需要验证tomcat是否安装成功,在浏览器的url中输入:http://127.0.0.1:8080/,就会进入如下的页面(表示安装成功): 在上面的左侧顶部,有一 ...
- C++ 中赋值运算符重载以及深拷贝浅拷贝解析
转载自:http://blog.csdn.net/business122/article/details/21242857 关键词:构造函数,浅拷贝,深拷贝,堆栈(stack),堆heap,赋值运算符 ...
- python工程的结构
1 python系统库的位置 大部分系统库在/usr/lib64/python2.7目录下,但是像sys模块,是python内置的库,是用c实现的,直接连接进了python.exe中了. 也就是说,在 ...
- RocketMQ的消息发送及消费
RocketMQ消息支持的模式: 消息支持的模式分为三种:NormalProducer(普通同步),消息异步发送,OneWay. 消息同步发送: 普通消息的发送和接收在前面已经演示过了,在前面的案例中 ...
- [2019杭电多校第七场][hdu6655]Just Repeat
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6655 题意是说两个人都有一些带有颜色的牌,两人轮流出牌,但是不能出对面出过的颜色的牌,最后谁不能出牌谁 ...
- .net 关于路径的总结
原文:https://www.cnblogs.com/hehehehehe/p/6196155.html https://www.cnblogs.com/yugongmengjiutian/artic ...