图片/图形

超酷CSS3鼠标悬停图片背景动画特效

也想出现在这里?联系我们
创客主机


这是一款超酷CSS3鼠标悬停图片背景动画特效。该特效在鼠标悬停到图片上面的时候,通过CSS3帧动画和filter过滤器来制作非常炫酷的图片遮罩层动画效果。

使用方法

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

  1. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

HTML结构

图片的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" alt="">
  6.                 <div class="box-content">
  7.                     <h3 class="title">Steve Thomas</h3>
  8.                     <span class="post">Web developer</span>
  9.                 </div>
  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 class="col-md-4 col-sm-6">
  17.             <div class="box">
  18.                 <img src="images/img-2.jpg" alt="">
  19.                 <div class="box-content">
  20.                     <h3 class="title">Kristina</h3>
  21.                     <span class="post">Web designer</span>
  22.                 </div>
  23.                 <ul class="icon">
  24.                     <li><a href="#"><i class="fa fa-search"></i></a></li>
  25.                     <li><a href="#"><i class="fa fa-link"></i></a></li>
  26.                 </ul>
  27.             </div>
  28.         </div>
  29.     </div>
  30. </div>

CSS样式

然后添加下面的CSS样式。

  1. .box{
  2.     font-family: 'Fira Sans', sans-serif;
  3.     text-align: center;
  4.     overflow: hidden;
  5.     position: relative;
  6. }
  7. .box:before,
  8. .box:after{
  9.     content: '';
  10.     background-color: rgba(255,255,255,0.7);
  11.     height: 25%;
  12.     width: 100%;
  13.     opacity: 0;
  14.     transform: translateX(-50%);
  15.     position: absolute;
  16.     left: 50%;
  17.     top: -100%;
  18.     transition: all 0.3s;
  19. }
  20. .box:after{ top: 100%; }
  21. .box:hover:before{
  22.     transform: translateX(-50%) translateY(0);
  23.     top: 0;
  24. }
  25. .box:hover:after{
  26.     transform: translateX(-50%) translateY(0);
  27.     top: auto;
  28.     bottom: 0;
  29. }
  30. .box:hover:before,
  31. .box:hover:after{
  32.     height: 50%;
  33.     opacity: 1;
  34.     animation: animate 0.5s linear;
  35. }
  36. .box img{
  37.     width: 100%;
  38.     height: auto;
  39. }
  40. .box .box-content{
  41.     width: 100%;
  42.     opacity: 0;
  43.     filter: blur(10px);
  44.     transform: translateX(-50%) translateY(-50%);
  45.     position: absolute;
  46.     top: 60%;
  47.     left: 50%;
  48.     z-index: 1;
  49.     transition: all 0.4s ease 0.1s;
  50. }
  51. .box:hover .box-content{
  52.     opacity: 1;
  53.     filter: blur(0);
  54.     top: 50%;
  55. }
  56. .box .title{
  57.     color: #4834d4;
  58.     font-size: 25px;
  59.     font-weight: 600;
  60.     text-transform: uppercase;
  61.     margin: 0;
  62. }
  63. .box .post{
  64.     color: #444;
  65.     font-size: 15px;
  66.     font-weight: 600;
  67.     text-transform: uppercase;
  68. }
  69. .box .icon{
  70.     padding: 0;
  71.     margin: 0;
  72.     list-style: none;
  73.     opacity: 0;
  74.     transform: translateX(-50%);
  75.     position: absolute;
  76.     left: 50%;
  77.     bottom: 10px;
  78.     z-index: 1;
  79.     transition: all 0.3s ease 0.3s;
  80. }
  81. .box:hover .icon{ opacity: 1; }
  82. .box .icon li{ display: inline-block; }
  83. .box .icon li a{
  84.     color: #fff;
  85.     background-color: #4834d4;
  86.     line-height: 25px;
  87.     height: 30px;
  88.     width: 30px;
  89.     border: 2px solid #fff;
  90.     border-radius: 50%;
  91.     box-shadow: 3px -3px 5px #555;
  92.     display: block;
  93.     transition: all 0.3s;
  94. }
  95. .box .icon li a:hover{
  96.     color: #4834d4;
  97.     background-color: #fff;
  98.     border-color: #4834d4;
  99. }
  100. @keyframes animate{
  101.     80%{ width: 90%; }
  102.     85%{ width: 95%; }
  103.     93%{ width: 85%; }
  104.     100%{ width: 100%; }
  105. }
  106. @media only screen and (max-width:990px){
  107.     .box{ margin-bottom: 30px; }
  108. }
  109. @media only screen and (max-width:479px){
  110.     .box .title{ font-size: 20px; }
  111. }
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

热评文章

发表评论

嘿,欢迎咨询!