html+css图片下弹出蒙版
鼠标移入时弹出蒙版!!!
html<!DOCTYPE html<html lang="en"<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="zimutanchu.css">
<title>Title</title>
</head>
<body>
<div class="mu1">
<div class="mu2">
<ul>
<li>
<a href="">
<img src="img/46.jpg" alt=""> <div class="zi">
<div class="tu1">
<img src="img/55.jpg" alt="">
</div>
<h5>hufef ef</h5>
</div> </a>
</li> </ul>
</div>
</div> </body>
</html> css:
*{
margin: 0;
padding: 0;
} .mu1{
width: auto;
}
.mu2{
width: 1200px;
height: 400px;
margin: auto;
}
ul{
width: 1200px;
height: 230px;
border: 1px solid red; }
ul li{
width: 25%;
list-style: none;
float: left;
position: relative;
overflow: hidden;
}
.zi{
position: absolute;
left: 0;
bottom: -100px;
width: 100%;
height: 100px;
background-color: transparent;
}
.tu1{
float: left;
}
h5{
float: left;
}
ul li:hover .zi{
background-color: black;
opacity: .5;
left: 0;
bottom: 0;
transition: all linear 1s;
}
html+css图片下弹出蒙版的更多相关文章
- 基于jQuery向下弹出遮罩图片相册
今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...
- 一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...
- MVVM模式下弹出窗体
原地址:http://www.cnblogs.com/yk250/p/5773425.html 在mvvm模式下弹出窗体,有使用接口模式传入参数new一个对象的,还有的是继承于一个window,然后在 ...
- css模仿微信弹出菜单
css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...
- JS/CSS 在屏幕底部弹出消息
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- android 闹钟提醒并且在锁屏下弹出Dialog对话框并播放铃声和震动
android 闹钟提醒并且在锁屏下弹出Dialog对话框并播放铃声和震动 1.先简单设置一个闹钟提醒事件: //设置闹钟 mSetting.setOnClickListener ...
- 两种纯CSS方式实现hover图片pop-out弹出效果
实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...
- Jquery 点击图片在弹出层显示大图
http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
随机推荐
- os.environ()
---------2016-5-9 18:56:39-- source:OS.ENVIRON()详解
- CodeForces 166B (凸包)
求一个多边形是否完全在另一个凸多边形内. 乍一看,好像要判点在多边形内,但复杂度不允许,仔细一想,可以把两个多边形的点混起来求一个共同的凸包,如果共同的凸包依旧是原来凸包上的点,说明是. #inclu ...
- 改善过多的if else
刚看到一个提问帖: <如果程序中出现多层嵌套的 if...else...语句,如何重构可使程序逻辑变得更为清晰易读?>,因回答篇幅比较大,单独开个帖子答一下. 个人喜好代码风格不一样,下面 ...
- daterangepicker 双日历/格式化日期/日期限制minDate,maxDate
var locale = { "format": 'YYYY/MM/DD', "separator": " - ", "apply ...
- android应用保活机制
android应用保活的基本原理: 都是通过双进程互拉以及设置进程的重要性,除非你root后 把自己的进程设置成系统进程. 互拉的方式有很多种 1.可以通过监听系统广播来把自己拉起来 2.可以多个ap ...
- sanBox部署简介
参考资料:1 http://www.kaaproject.org/getting-started/ 此链接告诉我们部署sandbox的两种方法. 2 http://docs.kaaprojec ...
- 读javascript高级程序设计04-canvas
一.基本用法 1.要使用canvas元素,需要先给定其width和height来设置绘图区域的大小.canvas中间的文本会在浏览器不支持canvas的情况下显示出来. <canvas widt ...
- WCF初探-14:WCF服务协定
前言: 在前面的文章中,我们定义的服务协定上都会有一个ServiceContract的特性来修饰,这是因为服务契约的实现要靠ServiceContractAttribute 属性定义,然后使用一个或多 ...
- Winform TreeList递归绑定树节点
/// <summary> /// 绑定树目录 /// </summary> /// <param name="parentId">父ID< ...
- Enable SSHD on Ubuntu
https://help.ubuntu.com/community/SSH/OpenSSH/Configuring