图片/图形

CSS3鼠标悬停图片炫酷遮罩层动画特效

阿里云


这是一款 CSS3 鼠标悬停图片炫酷遮罩层动画特效,该特效在鼠标悬停到图片上面时,图片遮罩层从四个方向向中间合拢,之后再展示图片的描述信息和链接,效果非现炫酷。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  2. <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

HTML 结构

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-4 col-sm-6">
  4.             <div class="box">
  5.                 <img src="images/img-1.jpg">
  6.                 <div class="box-content">
  7.                     <div class="content">
  8.                         <h3 class="title">Kristina</h3>
  9.                         <span class="post">Web designer</span>
  10.                         <ul class="icon">
  11.                             <li><a href="#"><i class="fa fa-search"></i></a></li>
  12.                             <li><a href="#"><i class="fa fa-link"></i></a></li>
  13.                         </ul>
  14.                     </div>
  15.                 </div>
  16.             </div>
  17.         </div>
  18.         <div class="col-md-4 col-sm-6">
  19.             <div class="box">
  20.                <img src="images/img-2.jpg">
  21.                 <div class="box-content">
  22.                     <div class="content">
  23.                         <h3 class="title">Miranda Roy</h3>
  24.                         <span class="post">Web designer</span>
  25.                         <ul class="icon">
  26.                             <li><a href="#"><i class="fa fa-search"></i></a></li>
  27.                             <li><a href="#"><i class="fa fa-link"></i></a></li>
  28.                         </ul>
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.     </div>
  34. </div>

CSS 样式

  1. .box{
  2.     font-family: 'Merriweather Sans', sans-serif;
  3.     box-shadow: 0 0 2px rgba(0, 0, 0, .1);
  4.     overflow: hidden;
  5.     position: relative;
  6.     z-index: 1;
  7. }
  8. .box:before,
  9. .box:after,
  10. .box .box-content:before,
  11. .box .box-content:after{
  12.     content: "";
  13.     width: 100%;
  14.     height: 50%;
  15.     background: #E65100;
  16.     opacity: 0.6;
  17.     transform: translateX(-50%) translateY(0%);
  18.     position: absolute;
  19.     top: -50%;
  20.     left: 50%;
  21.     z-index: 1;
  22.     -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
  23.     clip-path: polygon(0 0, 50% 100%, 100% 0);
  24.     transition: all .3s;
  25. }
  26. .box:after{
  27.     transform: translateX(-50%) translateY(0%);
  28.     top: auto;
  29.     bottom: -50%;
  30.     z-index: 0;
  31.     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  32.     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  33. }
  34. .box .box-content:before{
  35.     width: 50%;
  36.     height: 100%;
  37.     transform: translateX(0%) translateY(-50%);
  38.     top: 50%;
  39.     left: auto;
  40.     right: -50%;
  41.     -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
  42.     clip-path: polygon(100% 0, 0 50%, 100% 100%);
  43. }
  44. .box .box-content:after{
  45.     width: 50%;
  46.     height: 100%;
  47.     transform: translateX(0%) translateY(-50%);
  48.     top: 50%;
  49.     right: auto;
  50.     left: -50%;
  51.     z-index: 0;
  52.     -webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
  53.     clip-path: polygon(0 100%, 100% 50%, 0 0);
  54. }
  55. .box:hover:before{ top:0; }
  56. .box:hover:after{ bottom:0; }
  57. .box:hover .box-content:before{ right:0; }
  58. .box:hover .box-content:after{ left:0; }
  59. .box img{
  60.     width: 100%;
  61.     height: auto;
  62.     transform: scale(1);
  63.     transition: all 0.5s;
  64. }
  65. .box:hover img{ transform: scale(1.5); }
  66. .box .box-content{
  67.     height: 100%;
  68.     width: 100%;
  69.     position: absolute;
  70.     left: 0;
  71.     top: 0;
  72. }
  73. .box .content{
  74.     text-align: center;
  75.     width: 100%;
  76.     transform: translateX(-50%) translateY(-50%);
  77.     position: absolute;
  78.     left: 50%;
  79.     top: 50%;
  80.     z-index: 1;
  81. }
  82. .box .title{
  83.     color: #fff;
  84.     font-size: 25px;
  85.     font-weight: 600;
  86.     text-transform: uppercase;
  87.     margin: 0 0 5px;
  88.     transform: rotateY(360deg) scale(0);
  89.     transition: all 0.5s;
  90. }
  91. .box:hover .title{ transform: rotateY(0) scale(1); }
  92. .box .post{
  93.     color: #fff;
  94.     font-size: 15px;
  95.     letter-spacing: 1px;
  96.     text-transform: capitalize;
  97.     margin: 0 0 15px;
  98.     display: block;
  99.     transform: rotateY(360deg) scale(0);
  100.     transition: all 0.5s ease 0.25s;
  101. }
  102. .box:hover .post{ transform: rotateY(0) scale(1); }
  103. .box .icon{
  104.     text-align: center;
  105.     padding: 0;
  106.     margin: 0;
  107.     list-style: none;
  108.     transform: rotateY(360deg) scale(0);
  109.     transition: all 0.5s ease 0.45s;
  110. }
  111. .box:hover .icon{ transform: rotateY(0) scale(1); }
  112. .box .icon li{
  113.     display: inline-block;
  114.     margin: 0 3px;
  115. }
  116. .box .icon li a{
  117.     color: #E65100;
  118.     background-color: #fff;
  119.     font-size: 18px;
  120.     line-height: 35px;
  121.     height: 35px;
  122.     width: 35px;
  123.     border-radius: 10px;
  124.     display: block;
  125.     transition: all 0.3s;
  126. }
  127. .box .icon li a:hover{
  128.     color: #fff;
  129.     background-color: #E65100;
  130.     box-shadow: 0 0 10px #000;
  131. }
  132. @media only screen and (max-width:990px){
  133.     .box{ margin-bottom: 30px; }
  134. }
  135. @media only screen and (max-width:479px){
  136.     .box .title{ font-size: 22px; }
  137. }

CSS3 鼠标悬停图片炫酷遮罩层动画特效

已有 360 人购买
  • oewz
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!