<!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. Oracle 外网访问

    环境:centos7+oracle 11gr2 公网:固定IP 症状:1521端口正常,netmanager配置测试正常,plsql连接提示ORA-12514: TNS:listener does n ...

  2. 使用Fiddler抓取手机请求

    使用Fiddler抓取手机请求 Fiddler 手机 今天想尝试在手机上抓包,发现一个好玩的小工具——Fiddler. Fiddler是一个专门的抓包工具,可以模拟请求,修改请求,手机应用调试等.还是 ...

  3. 15天玩转redis —— 第九篇 发布/订阅模式

    本系列已经过半了,这一篇我们来看看redis好玩的发布订阅模式,其实在很多的MQ产品中都存在这样的一个模式,我们常听到的一个例子 就是邮件订阅的场景,什么意思呢,也就是说100个人订阅了你的博客,如果 ...

  4. RSA算法原理

    一直以来对linux中的ssh认证.SSL.TLS这些安全认证似懂非懂的.看到阮一峰博客中对RSA算法的原理做了非常详细的解释,看完之后茅塞顿开,关于RSA的相关文章如下 RSA算法原理(一) RSA ...

  5. MySql存储过程

    MySQL 存储过程 ```sql CREATE PROCEDURE myprocedure (IN para01 INTEGER) BEGIN DECLARE var01 CHAR(10); IF ...

  6. AJAX跨域调用ASP.NET MVC或者WebAPI服务的解决方案

    问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模板创建一个最简单的ASP.NET Web ...

  7. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  8. codeforces 597C C. Subsequences(dp+树状数组)

    题目链接: C. Subsequences time limit per test 1 second memory limit per test 256 megabytes input standar ...

  9. Holographic Remoting Player

    https://developer.microsoft.com/en-us/windows/holographic/holographic_remoting_player http://www.cnb ...

  10. hibernate关联映射

    首先,建立user表,news表 建立User,News类 package com.example.hibernate; import java.util.Set; public class User ...