<!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;
  transform-origin: bottom center;
  opacity: 0;
  transform: scale(1,-1) skew(-10deg);
  transition: all 0.3s ease-in-out;
}
.hover-set1 .hover-img .caption p {
  font-family: Arial;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  padding-bottom: 10px;
  color: #FFD789;
}
.hover-set1 .hover-img .caption a {
  display: block;
  font-family: 'Arial';
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding: 5px;
  color: #000;
  background: #FFD789;
  transition: all 0.5s ease;
}
.hover-set1 .hover-img .caption a:hover {
  color: #FFD789;
  background: #222;
}
.hover-set1 .hover-img .img {
  width: 250px;
  height: 250px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.hover-set1 .hover-img img {
  transition: all 0.3s ease;
}
.hover-set1 .hover-img:hover .img {
  transform: scale(0.9,0.9);
}
.hover-set1 .hover-img:hover .caption {
  opacity: 1;
  transform: scale(1,1) skew(0);
}

/* ======== */
.hover-set2 .hover-img {
  width: 250px;
  height: 250px;
  margin: 5px;
  float: left;
  background: #222/*#44FCF6*/;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}
.hover-set2 .hover-img {
  transition: all 0.5s ease;
}
.hover-set2 .hover-img .img {
  overflow: hidden;
  transition: all 0.5s ease;
}
.hover-set2 .hover-img .caption {
  width: 250px;
  height: 250px;
  display: block;
  background: #1BB5AF;
  position: relative;
  top: 0;
  transform-origin: top center;
  transform: rotate(180deg);
  transition: all 0.5s ease;
}
.hover-set2 .hover-img .caption p {
  padding: 25px;
  margin-top: 25px;
  font-family: Arial;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  text-align: center;
}
.hover-set2 .hover-img .caption a {
  display: block;
  font-family: Arial;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  background: #44FCF6;
  color: #444;
  padding: 10px 0;
  transition: all 0.5s ease;
}

.hover-set2 .hover-img:hover .caption {
  transform: rotate(0deg);
}
.hover-set2 .hover-img:hover .img {
  transform: scale(0.9,0.9);
}

.hover-set2 .hover-img .caption a:hover {
  background: #222;
  color: #44FCF6;
}</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-set2">
  <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. css实现悬浮效果的阴影

    要实现的效果图: 图片.png 实现的代码: -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box-shadow:0px 3px 3px #c8c8c8 ...

  2. 纯CSS实现的右侧底部简洁悬浮效果

    我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...

  3. [css]演示：纯CSS实现的右侧底部简洁悬浮效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  4. html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  5. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  6. 使用Three.js实现神奇的3D文字悬浮效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...

  7. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  8. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  9. Android 仿美团网,大众点评购买框悬浮效果之修改版

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...

随机推荐

  1. iOS 应用程序生命周期

    开发应用程序都要了解其生命周期. 今天我们接触一下iOS应用程序的生命周期, iOS的入口在main.m文件: int main(int argc, char * argv[]) { @autorel ...

  2. iOS开发：创建真机调试证书及描述文件

    iOS开发:创建真机调试证书及描述文件 关于苹果iOS开发,笔者也是从小白过来的,经历过各种困难和坑,其中就有关于开发证书,生产证书,in_house证书,add_Hoc证书申请过程中的问题,以及上架 ...

  3. UILabel 自适应宽高

    #import <UIKit/UIKit.h> @interface UILabel (UILabel_LabelHeighAndWidth) + (CGFloat)getHeightBy ...

  4. linux shell程序

    shell程序介绍 1.查看我们的Linux(centos6.5为例)有多少我们可以使用的shell: [root@localhost bin]# cat /etc/shells /bin/sh /b ...

  5. SQL优化技术分析-3：SQL语句索引的利用

    使用索引来更快地遍历表.默认情况下建立的索引是非聚集索引,但有时它并不是最佳的.在非聚集索引下,数据 在物理上随机存放在数据页上.合理的索引设计要建立在对各种查询的分析和预测上.一般来说: 有大量重复 ...

  6. Java多线程中的死锁问题

    Java程序基本都要涉及到多线程,而在多线程环境中不可避免的要遇到线程死锁的问题.Java不像数据库那么能够检测到死锁,然后进行处理,Java中的死锁问题,只能通过程序员自己写代码时避免引入死锁的可能 ...

  7. db2学习笔记--数据类型对表的影响

    创建表的时为列选择合适的数据类型,可以提高数据库性能. 1.选择合适的数据类型,避免出现数据类型转换.例如日期,有人使用字符串来存放日期.时间戳,最后我们还要在程序中使用to_date做数据类型转换, ...

  8. Oracle学习笔记四 SQL命令（二）：SQL操作语言类别

    SQL分为下列语言类别 1.数据定义语言(DDL) Create.Alter.Drop 2.数据操纵语言(DML) Insert.Select.Delete.Update 3.事务控制语言(TCL) ...

  9. L2-011. 玩转二叉树

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA28AAAHQCAIAAAC5rsUiAAAgAElEQVR4nO3dzYts953n+foXcpUL0Q

  10. AC日记——楼房 codevs 2995

    2995 楼房  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 地平线(x轴)上有n个矩(lou ...