css 实现悬浮效果

时间：2022-04-01 05:52:39

<!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. &lbrack;css&rsqb;演示：纯CSS实现的右侧底部简洁悬浮效果

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

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

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

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

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

  6. css三级菜单效果

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

  7. 推荐20款基于 jQuery &amp&semi; CSS 的文本效果插件

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

  8. Android 仿美团网&comma;大众点评购买框悬浮效果之修改版

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

  9. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

随机推荐

  1. thinkphp5命名规范

    类的命名采用驼峰法,并且首字母大写.如:User.UserType[不需要加后缀.如IndexController是没必要的,应当直接为Index.接口或者抽象类也保持这个规范] 属性命名采用驼峰法, ...

  2. c&plus;&plus;11的初始化

    c++11 中类型初始更加方便 比如     vector<int> vec = {1,2,3}; vector<int> vec{1,2,3}; map<string, ...

  3. &lbrack;SoapUI&rsqb; SoapUI Response 格式控制

    application/后面可以修改为自己所需要的内容格式.

  4. 扩展easyui 的表单验证 （转）

    From:http://www.cnblogs.com/gengaixue/archive/2012/07/14/2591054.html easyui 的validatebox()提供了自定义验证的 ...

  5. Caching Tutorial

    for Web Authors and Webmasters This is an informational document. Although technical in nature, it a ...

  6. nginx配置时的一些问题

    在配置nginx的时候出现的一些问题,在此记录: 1.如何打开nginx服务: 方法1:打开解压的下载文件,双击打开nginx.exe即可(出现闪退,我以为是出问题了,其实是服务已经启动了) 方法2: ...

  7. AngularJS路由跳转

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...

  8. Nginx负载均衡使用ip

    upstream test1{ server 192.168.1.213; server 192.168.1.37; } server { listen 80; # default backlog=2 ...

  9. Cs Round&num;54 D Spanning Trees

    题意:构造一张N个结点无重边.无自环的无向图.使得其最小生成树和最大生成树共享K条边. 样例一很具有启发性: 当K!=0时,我们可以先构造出一条链,链的长度为n-k的链,作为最小生成树的一部分,之后由 ...

  10. 深度学习之卷积神经网络&lpar;CNN&rpar;详解与代码实现（一）

    卷积神经网络(CNN)详解与代码实现 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/10430073.html 目 ...

相关文章