<!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. VS2012 Unit Test —— 我对IdleTest库动的大手术以及对Xml相关操作进行测试的方式

    [1]我的IdleTest源码地址:http://idletest.codeplex.com/ [2]IdleTest改动说明:2013年10月份在保持原有功能的情况下对其动了较大的手术,首先将基本的 ...

  2. Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理

    RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...

  3. CentOS7 修改防火墙，增加外网可以访问的端口号

    CentOS7 修改防火墙,增加外网可以访问的端口号: vim /etc/sysconfig/iptables 增加一条 -A INPUT -p tcp -m state --state NEW -m ...

  4. php foreach引用赋值

    在写代码时发现php foreach引用赋值会导致意外的行为. 代码示例: <?php $arr = array('a','b','c'); foreach($arr as $k=>&am ...

  5. Linux基础练习题

    1.列出当前系统上所有已经登录的用户名,注意:同一个用户登录多次,则只显示一次即可. [root@bj-1-160-enzhi ~]# who|cut -d ' ' -f 1|uniq -c 2 ro ...

  6. MSBuild 编译 C# Solution

    Microsoft(R) 生成引擎版本 4.6.1055.0 [Microsoft .NET Framework 版本 4.0.30319.42000] 版权所有 (C) Microsoft Corp ...

  7. 前端少侠的ps故事

    前端少侠的ps故事 正所谓,码在江湖,身不由己.自21世纪前后端分离,代码分工细化以来,前端与设计的合作也变得越来越重要.有人说,如果前端懂设计的话,工作会更快一点.倘若说我入前端半年能算半个前端少侠 ...

  8. 升级xcode8之后出现报错提示，提示swift版本问题

    最近Xcode升级了,出现了各种蛋疼的错误提示,今天遇到个导入框架出现了提示Swift版本的问题,具体如下: "Use Legacy Swift Language Version" ...

  9. PAT 1050. 螺旋矩阵(25)

    本题要求将给定的N个正整数按非递增的顺序,填入"螺旋矩阵".所谓"螺旋矩阵",是指从左上角第1个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为m行n列,满足条 ...

  10. CodeBlocks及LCM应用

    以下是在开发过程中遇到的一些细节点: 1)called after throwing an instance of std::bad_alloc 此问题是由于publish(data),当中data赋 ...