<!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. 靠谱的datatable转json方法

    今天有之前同事问我要datatable转json的方法,以前自己也弄过,但感觉网上有很多不靠谱的方法.所以自己在博客里记录一个,当然也是网上找的,但是这个靠谱一点,起码可以用不会报错,所以叫他靠谱的d ...

  2. iOS - NSMutableAttributedString富文本的实现

    NSMutableAttributedString继承于NSAttributedString(带属性的字符串)能够简单快速实现富文本的效果;不多说直接上效果图和代码,通俗易懂: (一)效果图: (二) ...

  3. linux 环境下运行STS时 出现must be available in order to run STS

    linux 环境下运行ECLIPSE时 出现 “ A Java Runtime Environment (JRE) or Java Development Kit (JDK) must be avai ...

  4. swift-元组

    元组: 将多个相同或者不同类型的值用一个小括号括起来就是一个元组.元组和结构体很像,实际上元组是复合类型.小括号内可以写任意类型,如果不定义类型,可以根据数据自动判断推算出类型 省略了类型 let p ...

  5. django ftp 研究

    做个网络运维多年,一直在用filezilla搭建ftp服务器,总体上还是不错的.但是用户配置与管理方面还是不太方便,希望能够通过web页面对用户进行管理和对ftp服务器进行监控. 工具: (1)dja ...

  6. 搞不清FastCgi与PHP-fpm之间是个什么样的关系？

    问 我在网上查fastcgi与php-fpm的关系,查了快一周了,基本看了个遍,真是众说纷纭,没一个权威性的定义. 网上有的说,fastcgi是一个协议,php-fpm实现了这个协议: 有的说,php ...

  7. 感受C# 的魅力，将一坨代码写成一行

    摘自MSDN :https://msdn.microsoft.com/zh-cn/library/bb549151(v=vs.100).aspx 1.平时定义一个委托 using System; // ...

  8. Oracle学习笔记十 使用PL/SQL

    PL/SQL 简介 PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言,是对 SQL 的扩展,它支持多种数据类型,如大对象和集合类型,可使用 ...

  9. Say goodbye to my photos&videos

    刚刚得知一个悲惨的消息:虽然2012已经过去了,但是世界末日并未过去.嗯,我不是来严肃的,我是来搞笑的.毕竟,我已经如此伤心了.中午结束考试,下午看了一半的电影然后躺室友的床上睡了一觉,醒来看到阿姨发 ...

  10. USACO . Greedy Gift Givers

    Greedy Gift Givers A group of NP (2 ≤ NP ≤ 10) uniquely named friends has decided to exchange gifts ...