纯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 ...
随机推荐
- python3 configparser模块
配置文件如下: import configparser conf = configparser.ConfigParser() print(type(conf)) #conf是类 conf.read(' ...
- css 实现渐变
background:-ms-radial-gradient(circle,rgba(0, 0, 0, 0.2),rgba(0,0,0,0)); /* IE 10*/ background: -web ...
- LeetCode 94. Binary Tree Inorder Traversal 动态演示
非递归的中序遍历,要用到一个stack class Solution { public: vector<int> inorderTraversal(TreeNode* root) { ve ...
- Parameter setting for Jemeter Post method
1. create CSV file note: the first line is parameter name 2. Add Controller Edit >Add >Logic C ...
- 项目被os x占用
xattr -d com.apple.FinderInfo 空格后拖入项目回车就行了
- 在无界面centos7上部署MYSQL5.7数据库
1. 利用xshell连接好服务后,输入 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 下载软件安装 ...
- Javascript之谈对象
谈谈如何理解对象 使用预定义对象只是面向对象语言的能力的一部分,ECMAScript 真正强大之处在于能够创建自己专用的类和对象.面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意 ...
- 本地SVN服务器的搭建（WINDOWS环境）
1.下载安装 VISUALSVN SERVER 1.1下载地址:https://www.visualsvn.com/server/download/ 1.2下载完成后,双击安装. 2.下载安装 Tor ...
- 回溯---Permutations II
47.Permutations II (Medium)](https://leetcode.com/problems/permutations-ii/description/) [1,1,2] hav ...
- EF6 MySQL错误之“Specified key was too long; max key length is 767 bytes”
由于 MySQL Innodb 引擎表索引字段长度的限制为 767 字节,因此对于多字节字符集的大字段(或者多字段组合索引),创建索引会出现上面的错误. 以 utf8mb4 字符集 字符串类型字段为例 ...