<!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. jquery 金额转换成大写

    <script language="javascript" type="text/javascript">         function Ara ...

  2. mongodb 3.x 之实用新功能窥看[1] ——使用TTLIndex做Cache处理

    mongodb一直都在不断的更新,不断的发展,那些非常好玩也非常实用的功能都逐步加入到了mongodb中,这不就有了本篇对ttlindex的介绍, 刚好我们的生产业务场景中就有这个一个案例... 一: ...

  3. 参加微软Ignite大会有感

    很有幸作为MVP参加了本次微软中国的年度技术大会(Ignite).跳出技术领域,这次会议给我最大的感受是态度.这几年不论是开源现有技术,还是黑科技的发布,都给人感觉微软在逐渐变得cool,但是cool ...

  4. jsmooth compilation failed error null

    JSmooth 0.9.9-7 在将 jar 文件打包成 exe 文件时报错:jsmooth compilation failed error null 原因,没有指定 logo 图片文件. http ...

  5. oracel数据导出导入

    一.导出模式(三种模式)及命令格式 1. 全库模式 exp 用户名/密码@网络服务名 full=y file=路径\文件名.dmp log=路径\文件名.log 2. 用户模式(一般情况下采用此模式) ...

  6. python排序之二冒泡排序法

    python排序之二冒泡排序法 如果你理解之前的插入排序法那冒泡排序法就很容易理解,冒泡排序是两个两个以向后位移的方式比较大小在互换的过程好了不多了先上代码吧如下: 首先还是一个无序列表lis,老规矩 ...

  7. 【Linux】重定向与管道

    重定向 redirection 每个命令有输入源和输出目的地,默认行为,是标准输入和标准输出.大多数情况,标准输入是键盘,标准输出是屏幕.可以为单独的操作修改输入和输出,这就是重定向.重定向可以使某个 ...

  8. [No0000A3]护眼谎言大揭秘，选择正确的方式保护眼睛！

    当眼睛因为过度劳累而状况频出的时候,许多人没有选择极目远眺.眼保健操.充分睡眠等简单易行的养眼方式,而是求助于各种护眼工具.于是,在视疲劳成为常见眼病之后,护眼市场产品层出不穷:护眼灯.眼贴.眼保仪. ...

  9. JAVA设计模式之2-简单工厂模式

    今天来介绍简单工厂模式,工厂模式包括简单工厂模式和抽象工厂模式,今天先讲简单工厂模式,然后引申到抽象工厂模式 在没有工厂模式前,我们创建类是直接new一个对象,比如下面所示,北汽有两个小型SUV,分别 ...

  10. 【swift学习笔记】五.使用枚举优雅的管理Segue

    在做页面转跳的时候,我们要给Segue命名,如果Segue多了,管理他们就是一个恶梦.我们可以枚举更优雅的管理这些Segue. 1.我们先来建立一个protocol,他的功能就是让实现类实现一个Seg ...