css悬浮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2 different hover effects - CodePen</title>
<style>
.hover-set1,.hover-set2 {
width: 790px;
height: 300px;
margin: 0 auto;
margin-top: 25px;
}
.hover-set1 .hover-img {
width: 250px;
height: 250px;
margin: 5px;
float: left;
background: #222;
position: relative;
}
.hover-set1 .hover-img .caption {
background: #DB485E;
padding: 15px 20px;
position: relative;
bottom: 0;
z-index:1000;
opacity: 0;
}
.hover-set1 .hover-img:hover .caption {
opacity: 1;
}
</style>
</head>
<body>
<div class="hover-set1">
<h1>HOVER DEMO 1</h1>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/6.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/2.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/3.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
</div>
<div class="hover-set1">
<h1>HOVER DEMO 2</h1>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/4.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/5.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
<div class="hover-img">
<div class="img">
<img src="http://www.zaole.net/7.jpg" height="250" alt="image 1" />
</div>
<div class="caption">
<p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit.</p>
<a href="#">More details</a>
</div>
</div>
</div>
</body>
</html>
css悬浮的更多相关文章
- H5 CSS 悬浮滚动条
H5 CSS 悬浮滚动条 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- css悬浮提示框
效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- css悬浮右侧悬浮
<html><head><title>CSSDemo</title><style type"text/css"> .ho ...
- css悬浮在页面顶端
.header{ position:fixed; margin-top:; width:%; z-index:; } .body{ position:relative; padding-top:119 ...
- 实用的60个CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
- CSS代码片段【图文】
1.垂直对齐 .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transf ...
- 60个有用CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
- html5悬浮球效果
自己想做一个自己的网站,觉得自适应的效果会好一点,但是放到手机端的话,菜单显示是个问题.所以自己试着写了一个悬浮球菜单的效果. 好了,上代码. 这里有四个文件要用: jqurey.js//因为基于jq ...
- 有用的css片段
1.背景渐变动画 CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色.透明度.元素大小添加动画.目前,你不能为渐变添加动画,但下面的代码可能有帮助.它通过改变背景位置,让它看起来有动 ...
随机推荐
- GsonFormat插件从配置到使用
说明:目前多数服务器端都以json格式返回,那么相对应的解析时建立的实体类如果你还在自己挨个写的话,那就out了.新建一个类,选择Generate. ------------------------- ...
- Junit单元测试
写一个被测试的类 这是类中的一些方法,将一个16进制转化为10进制 reckon()为转化的主要方法,返回结果为10进制数 judge()判断字符是否在0-9,A-F之间,并将字符转化为0-15之中的 ...
- 简历生成平台项目开发-STEP3第一次项目例会探讨
时间:2016.7.13周三7点半 地点:图书馆 讨论主题:项目需求和功能分析.第一次任务分配 内容:按照之前的讨论,我们认为简历生成功能,不仅要适应学生求职的需求,更多的是要在格式和内容上满足HR的 ...
- SQL Server 2014 Database Mail重复发送邮件特殊案例
在一数据库服务器(Microsoft SQL Server 2014 (SP2) (KB3171021) - 12.0.5000.0 (X64))发现有个作业调用Database Mail发送邮件时, ...
- Hbase入门教程--单节点伪分布式模式的安装与使用
Hbase入门简介 HBase是一个分布式的.面向列的开源数据库,该技术来源于 FayChang 所撰写的Google论文"Bigtable:一个结构化数据的分布式存储系统".就像 ...
- 《HeadFirst SQL》笔记
规范化 0 约束 1 原子性 2 第一范式 1NF 3 数据模式 4 依赖 5 联接查询 6 交叉联接(AKA 笛卡尔联接,叉积) 7 内联接 8 子查询 9 外联接 10 自联接 11 集合 12 ...
- android onNewIntent调用时机
(转自:http://www.cnblogs.com/zenfly/archive/2012/02/10/2345196.html) 在IntentActivity中重写下列方法:onCreate o ...
- 深入java集合学习2-ArrayList的实现原理
ArrayList概述 类概述 ArrayList是List 接口的大小可变数组的实现.实现了所有可选列表操作,并允许包括 null 在内的所有元素. 每个 ArrayList 实例都有一个容量(ca ...
- win8改win7笔记
内存<=4G,选32位(×86) 内存>=4G,选64位(×64) (非必须) BIOS设置 USB Boot Support Disabled改为Enabled(如 ...
- easy_UI
引入js/css样式 <link rel="stylesheet" type="text/css" href="<%=path%>/ ...