<!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悬浮的更多相关文章

  1. H5 CSS 悬浮滚动条

    H5 CSS 悬浮滚动条 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  2. css悬浮提示框

    效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. css悬浮右侧悬浮

    <html><head><title>CSSDemo</title><style type"text/css"> .ho ...

  4. css悬浮在页面顶端

    .header{ position:fixed; margin-top:; width:%; z-index:; } .body{ position:relative; padding-top:119 ...

  5. 实用的60个CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  6. CSS代码片段【图文】

    1.垂直对齐 .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transf ...

  7. 60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  8. html5悬浮球效果

    自己想做一个自己的网站,觉得自适应的效果会好一点,但是放到手机端的话,菜单显示是个问题.所以自己试着写了一个悬浮球菜单的效果. 好了,上代码. 这里有四个文件要用: jqurey.js//因为基于jq ...

  9. 有用的css片段

    1.背景渐变动画 CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色.透明度.元素大小添加动画.目前,你不能为渐变添加动画,但下面的代码可能有帮助.它通过改变背景位置,让它看起来有动 ...

随机推荐

  1. listview侧滑删除

    自定义Listview,向左滑动,右边刚好显示删除按钮: public class SlideListView extends ListView { private int mScreenWidth; ...

  2. 改变Activity启动时的默认动画

    why 在开发中我们可能需要改变这一行为,一般基于2种理由: 产品的spec这么要求的: 想自己控制这个行为,因为在Android设备上可能每个的这一默认行为都不一样,厂商可以很容易修改它,从而导致a ...

  3. response和request的区别以及常见问题解决

    request是请求,即客服端发来的请求 response是响应,是服务器做出的响应 --------------------------------------------------------- ...

  4. Graphviz绘制百家争鸣图

    最近读易中天<先秦诸子百家>,一边读一边在纸上画出逻辑关系,图越来越复杂,趁中午休息索性就把图用Graphviz重新绘制了一下;由于Graphviz主动承担了绘图排版的职责,我只需要关注内 ...

  5. tomcat linux下的部署安装

    Tomcat在Linux上的安装与配置 转自http://blog.csdn.net/gyming/article/details/36060843     以下使用的Linux版本为: Redhat ...

  6. 关于java的递归写法，经典的Fibonacci数的问题

    经典的Fibonacci数的问题 主要想展示一下迭代与递归,以及尾递归的三种写法,以及他们各自的时间性能. public class Fibonacci { /*迭代*/ public static ...

  7. HDOJ 1008. Elevator 简单模拟水题

    Elevator Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  8. 安装ArcGIS Engine 9.3

    本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6217003.html 准备: ArcGIS Engine 9.3.crack_for ...

  9. [LeetCode] Word Break II 拆分词句之二

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  10. JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...