<!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. Linux2.6内核进程调度系列--scheduler_tick()函数2.更新实时进程的时间片

    RT /** * 递减当前进程的时间片计数器,并检查是否已经用完时间片. * 由于进程的调度类型不同,函数所执行的操作也有很大差别. */ /* 如果是实时进程,就进一步根据是FIFO还是RR类型的实 ...

  2. IT软件技术人员的职位路线（从程序员到技术总监） - 部门管理经验谈

    以前写过一个文(IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章),主要介绍笔者的职业发展之路,不过该文需要后续了,因为笔者现在从事的是“产品经理”一职.从笔者的导航文([置顶]博文快 ...

  3. mysql半同步复制问题排查

    1.问题背景      默认情况下,线上的mysql复制都是异步复制,因此在极端情况下,主备切换时,会有一定的概率备库比主库数据少,因此切换后,我们会通过工具进行回滚回补,确保数据不丢失.半同步复制则 ...

  4. 分享一个html+js+ashx+easyui+ado.net权限管理系统

    EasyUI.权限管理 这是个都快被搞烂了的组合,但是easyui的确好用,权限管理在项目中的确实用.一直以来博客园里也不少朋友分享过,但是感觉好的要不没源码,要不就是过度设计写的太复杂看不懂,也懒得 ...

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

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

  6. ios10.2真机调试包，ios升级10.2后需要添加

    下载地址: http://download.csdn.net/detail/koktear/9710820 添加地址: finder-应用程序-找到Xcode-右击显示包内容-Contents-Dev ...

  7. DOS下windows系统查看wifi密码

    DOS下windows系统查看wifi密码 首先,按win+R键,win键如下 弹出框中输入cmd 在弹出界面输入 netsh wlan show profiles 你可以看到你链接过的所有wifi名 ...

  8. linux输入子系统（input subsystem）之按键输入和LED控制

    实验现象:在控制台打印按键值,并且通过按键控制相应的LED亮灭. 1.代码 input_subsys_drv.c #include <linux/module.h> #include &l ...

  9. NodeJS使用formidable实现文件上传

    最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实 ...

  10. [LeetCode] Verify Preorder Sequence in Binary Search Tree 验证二叉搜索树的先序序列

    Given an array of numbers, verify whether it is the correct preorder traversal sequence of a binary ...