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中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色.透明度.元素大小添加动画.目前,你不能为渐变添加动画,但下面的代码可能有帮助.它通过改变背景位置,让它看起来有动 ...
随机推荐
- ARCGIS SDE空间化处理
在 Oracle 中,ST_Geometry 和 ST_Raster 的 SQL 函数使用通过 Oracle 的外部过程代理(即 extproc)访问的共享库.要将 SQL 和 ST_Geometry ...
- Android 从零开始打造异步处理框架
转载请标明出处:http://www.cnblogs.com/zhaoyanjun/p/5995752.html 本文出自[赵彦军的博客] 概述 在Android中会使用异步任务来处理耗时操作,避免出 ...
- Appfuse：添加自定义页面组件
我之前是做ASP.NET的,碰到被多个页面都使用的类似组件后,就想着采用ascx(用户自定义组件)来解决,那做Java我也想用这种方案. 我要做的效果如下: 实现方案:tag方式(自定义标签) 1. ...
- oracle触发器
类型 行级触发器: FOR EACH ROW 影响的每一行都会执行触发器 语句级出发器 默认的模式,一句话才执行一次触发器 触发器不能嵌套,不能含有事务控制语句 何时触发 Before:条件运行前 A ...
- 一个典型的MapRuduce实例------webcount（网站统计访客信息）
统计某一特定网站的某个时辰访客人数 所用版本:hadoop2.6.5 数据样式如下: 111.111.111.111 - - [16/Dec/2012:05:32:50 -0500] "GE ...
- AspNetPager 多条件分页查询
AspNetPager 这个分页控件一般做后台基本都知道的,我就不多说了(说明与下载链接:http://www.webdiyer.com/Controls/AspNetPager),嘿嘿!其实我也是刚 ...
- spring squertz定时任务
spring squertz是一个强大的定时任务处理方式 1.需要的Jar quartz-1.8.5.jar commons-logging.jar spring-core-3.0.5.RELEASE ...
- [收集]MVC3 HTML辅助方法集录
1.跳转链接 @Html.ActionLink("linkText","actionName",routeValues,htmlAttributes) e.g& ...
- 齐夫定律， Zipf's law，Zipfian distribution
齐夫定律(英语:Zipf's law,IPA英语发音:/ˈzɪf/)是由哈佛大学的语言学家乔治·金斯利·齐夫(George Kingsley Zipf)于1949年发表的实验定律. 它可以表述为: 在 ...
- 信息中心网络 ，Information-centric networking， ICN