纯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++ 命名管道示例
想做一个 Hook CreateFile 重定向到内存的功能,貌似可以假借命名管道实现这个功能.不熟悉命名管道,做了几个demo,如下: Server: // NamedPipeServer.cpp ...
- Java ——JDBC数据库编程
数据库分类 关系型数据库:以表来存放数据的,数据与数据之间的关系通过表之间的连接体现 面向对象的数据库:保存的是对象本身 其它 数据库:数据库管理系统中创建一个个的保存数据的单位 数据是保存在数据库的 ...
- 阅读笔记09-Java程序员必备的Intellij插件
1. .ignore 生成各种ignore文件,一键创建git ignore文件的模板,免得自己去写 地址:plugins.jetbrains.com/plugin/7495--ignore 2. l ...
- Vue.js 注册组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python绘制五角星
问题描述: python中运用turtle图形模块绘制五角星 问题分析: turtle绘制图形时,得知图形中重要点的坐标非常重要. 于是,绘制五角星问题转化成为一个数学问题,计算五个顶点坐标即可. 已 ...
- sublime text3插件安装及使用
sublime官网下载地址:http://www.sublimetext.com/ 我用的是SubLime text3,插件安装命令地址:https://packagecontrol.io/insta ...
- Codeforces 396C (DFS序+线段树)
题面 传送门 题目大意: 给定一棵树,每个点都有权值,边的长度均为1,有两种操作 操作1:将节点u的值增加x,并且对于u的子树中的任意一个点v,将它的值增加x-dist(u,v)*k, dist(u, ...
- 初学css display
display:网上查到的资料说是:属性规定元素应该生成的框的类型.例如:网页上的导航栏,使用ul->li那么需要让其排列在一行上可以使用设置li:{float:left:},也可以使用disp ...
- winform datagridview 绑定泛型集合变得不支持排序的解决方案
原文:winform datagridview 绑定泛型集合变得不支持排序的解决方案 案例: 环境:Winform程序 控件:Datagridview 现象:Datagridview控件绑定到List ...
- EF6 MySQL错误之“Specified key was too long; max key length is 767 bytes”
由于 MySQL Innodb 引擎表索引字段长度的限制为 767 字节,因此对于多字节字符集的大字段(或者多字段组合索引),创建索引会出现上面的错误. 以 utf8mb4 字符集 字符串类型字段为例 ...