图片/图形

CSS3鼠标悬停图片模糊过渡动画特效

面包多

CSS3鼠标悬停图片模糊过渡动画特效-创客云
这是一款 CSS3 鼠标悬停图片模糊过渡动画特效。该特效在鼠标悬停在图片上面的时候,图片会以模糊的方式消失,同时新的图片显示在原来的图片上面。

使用方法

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

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

HTML 结构

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-3 col-sm-6">
  4.             <div class="product-grid">
  5.                 <div class="product-image">
  6.                     <a href="#" class="image">
  7.                         <img class="pic-1" src="images/img-1.jpg">
  8.                         <img class="pic-2" src="images/img-2.jpg">
  9.                     </a>
  10.                     <span class="product-discount-label">-20%</span>
  11.                     <a class="product-like-icon" href="#"><i class="far fa-heart"></i></a>
  12.                 </div>
  13.                 <div class="product-content">
  14.                     <h3 class="title"><a href="#">Men's Shirt</a></h3>
  15.                     <ul class="rating">
  16.                         <li class="fas fa-star"></li>
  17.                         <li class="fas fa-star"></li>
  18.                         <li class="fas fa-star"></li>
  19.                         <li class="fas fa-star"></li>
  20.                         <li class="fas fa-star disable"></li>
  21.                     </ul>
  22.                     <div class="price"><span>$20.00</span> $16.00</div>
  23.                     <a class="add-to-cart" href="">Add to cart</a>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.         <div class="col-md-3 col-sm-6">
  28.             <div class="product-grid">
  29.                 <div class="product-image">
  30.                     <a href="#" class="image">
  31.                         <img class="pic-1" src="images/img-3.jpg">
  32.                         <img class="pic-2" src="images/img-4.jpg">
  33.                     </a>
  34.                     <span class="product-discount-label">-30%</span>
  35.                     <a class="product-like-icon" href="#"><i class="far fa-heart"></i></a>
  36.                 </div>
  37.                 <div class="product-content">
  38.                     <h3 class="title"><a href="#">Women's Cotton Top</a></h3>
  39.                     <ul class="rating">
  40.                         <li class="fas fa-star"></li>
  41.                         <li class="fas fa-star"></li>
  42.                         <li class="fas fa-star"></li>
  43.                         <li class="fas fa-star"></li>
  44.                         <li class="fas fa-star"></li>
  45.                     </ul>
  46.                     <div class="price"><span>$27.00</span> $18.00</div>
  47.                     <a class="add-to-cart" href="">Add to cart</a>
  48.                 </div>
  49.             </div>
  50.         </div>
  51.     </div>
  52. </div>

CSS 样式

  1. .product-grid{
  2.     font-family: 'Quicksand', sans-serif;
  3.     text-align: center;
  4. }
  5. .product-grid .product-image{
  6.     position: relative;
  7.     overflow: hidden;
  8. }
  9. .product-grid .product-image a.image{
  10.     border: 1px solid #e1e1e1;
  11.     display: block;
  12. }
  13. .product-grid .product-image img{
  14.     width: 100%;
  15.     height: auto;
  16. }
  17. .product-image .pic-1{
  18.     backface-visibility: hidden;
  19.     transition: all 0.5s;
  20. }
  21. .product-grid:hover .product-image .pic-1{
  22.     opacity: 0;
  23.     filter: blur(10px);
  24. }
  25. .product-image .pic-2{
  26.     width: 100%;
  27.     height: 100%;
  28.     backface-visibility: hidden;
  29.     opacity: 0;
  30.     filter: blur(10px);
  31.     position: absolute;
  32.     top: 0;
  33.     left: 0;
  34.     transition: all 0.5s;
  35. }
  36. .product-grid:hover .product-image .pic-2{
  37.     opacity: 1;
  38.     filter: blur(0);
  39. }
  40. .product-grid .product-discount-label{
  41.     color: #fff;
  42.     background: #ff6b6b;
  43.     font-size: 16px;
  44.     font-weight: 400;
  45.     padding: 4px 5px;
  46.     position: absolute;
  47.     top: 15px;
  48.     left: 15px;
  49. }
  50. .product-grid .product-like-icon{
  51.     color: #222;
  52.     font-size: 20px;
  53.     opacity: 0;
  54.     position: absolute;
  55.     top: 15px;
  56.     right: 15px;
  57.     transition: all 0.2s ease-out;
  58. }
  59. .product-grid .product-like-icon:hover{ color: #888; }
  60. .product-grid:hover .product-like-icon{ opacity: 1; }
  61. .product-grid .product-content{ padding: 12px; }
  62. .product-grid .title{
  63.     font-size: 16px;
  64.     text-transform: capitalize;
  65.     margin: 0 0 5px;
  66. }
  67. .product-grid .title a{
  68.     color: #222;
  69.     transition: all 500ms;
  70. }
  71. .product-grid .title a:hover{ color: #341f97; }
  72. .product-grid .rating{
  73.     padding: 0;
  74.     margin: 0 0 5px;
  75.     list-style: none;
  76. }
  77. .product-grid .rating li{
  78.     color: #f5c60d;
  79.     font-size: 14px;
  80. }
  81. .product-grid .rating li.disable{ color: #E1E1E1; }
  82. .product-grid .price{
  83.     color: #341f97;
  84.     font-size: 16px;
  85.     font-weight: 400;
  86.     margin: 0 0 10px;
  87. }
  88. .product-grid .price span{
  89.     color: #888;
  90.     display: inline-block;
  91.     text-decoration: line-through;
  92.     margin-right: 3px;
  93. }
  94. .product-grid .add-to-cart{
  95.     color: #fff;
  96.     background: #341f97;
  97.     font-size: 14px;
  98.     font-weight: 500;
  99.     text-transform: uppercase;
  100.     width: 65%;
  101.     padding: 14px 10px;
  102.     margin: 0 auto;
  103.     display: block;
  104.     position: relative;
  105.     transition: all 0.3s;
  106. }
  107. .product-grid .add-to-cart:hover{
  108.     background: #222;
  109.     color: #fff;
  110. }
  111. @media only screen and (max-width:990px){
  112.     .product-grid{ margin: 0 0 40px; }
  113. }
(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

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

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!