布局框架

简洁的商品网格列表布局动画特效

面包多

简洁的商品网格列表布局动画特效-创客云
这是一款简洁的商品网格列表布局动画特效。该视频网格列表布局采用卡片网格布局的方式进行布局。当鼠标悬停到视频图片上面的时候,图片会轻微的放大,并出现操作图标。

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.                   </a>
  9.                   <span class="product-new-label">new</span>
  10.                   <ul class="social">
  11.                       <li><a href="" data-tip="Quick view"><i class="fas fa-search"></i></a></li>
  12.                       <li><a href="" data-tip="Add to Wishlist"><i class="far fa-heart"></i></a></li>
  13.                       <li><a href="" data-tip="Compare"><i class="fas fa-random"></i></a></li>
  14.                   </ul>
  15.               </div>
  16.               <div class="product-content">
  17.                   <h3 class="title"><a href="#">Women's Blouse Top</a></h3>
  18.                   <div class="price">$18.50</div>
  19.                   <ul class="rating">
  20.                       <li class="fas fa-star"></li>
  21.                       <li class="fas fa-star"></li>
  22.                       <li class="fas fa-star"></li>
  23.                       <li class="fas fa-star"></li>
  24.                       <li class="far fa-star"></li>
  25.                   </ul>
  26.                   <a class="add-to-cart" href="#">
  27.                      <i class="fas fa-shopping-cart"></i> <span>ADD TO CART</span>
  28.                   </a>
  29.               </div>
  30.           </div>
  31.       </div>
  32.       <div class="col-md-3 col-sm-6">
  33.           <div class="product-grid">
  34.               <div class="product-image">
  35.                   <a href="#" class="image">
  36.                       <img class="pic-1" src="images/img-2.jpg">
  37.                   </a>
  38.                   <span class="product-new-label">new</span>
  39.                   <ul class="social">
  40.                       <li><a href="" data-tip="Quick view"><i class="fas fa-search"></i></a></li>
  41.                       <li><a href="" data-tip="Add to Wishlist"><i class="far fa-heart"></i></a></li>
  42.                       <li><a href="" data-tip="Compare"><i class="fas fa-random"></i></a></li>
  43.                   </ul>
  44.               </div>
  45.               <div class="product-content">
  46.                   <h3 class="title"><a href="#">Men's jacket</a></h3>
  47.                   <div class="price"><span>$30.00</span>$20.00</div>
  48.                   <ul class="rating">
  49.                       <li class="fas fa-star"></li>
  50.                       <li class="fas fa-star"></li>
  51.                       <li class="fas fa-star"></li>
  52.                       <li class="far fa-star"></li>
  53.                       <li class="far fa-star"></li>
  54.                   </ul>
  55.                   <a class="add-to-cart" href="#">
  56.                      <i class="fas fa-shopping-cart"></i> <span>ADD TO CART</span>
  57.                   </a>
  58.               </div>
  59.           </div>
  60.       </div>
  61.   </div>
也想出现在这里?联系我们
创客主机

CSS 样式

  1. .product-grid{
  2.     font-family: 'Open Sans', 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{ display: block; }
  10. .product-grid .product-image img{
  11.     width: 100%;
  12.     height: auto;
  13.     transition: all 0.3s;
  14. }
  15. .product-grid .product-image:hover img{ transform: scale(1.05); }
  16. .product-grid .product-new-label{
  17.     color: #fff;
  18.     background: #cd1b29;
  19.     font-size: 12px;
  20.     font-weight: 600;
  21.     text-transform: uppercase;
  22.     padding: 3px 10px 10px;
  23.     position: absolute;
  24.     top: 0px;
  25.     left: 0;
  26.     clip-path: polygon(0 0, 100% 0, 100% 75%, 15% 75%, 0 100%, 0% 25%);
  27. }
  28. .product-grid .social{
  29.     padding: 0;
  30.     margin: 0;
  31.     list-style: none;
  32.     opacity: 0;
  33.     transform: translateY(-50%);
  34.     position: absolute;
  35.     top:50%;
  36.     left: -50px;
  37.     transition: all 0.3s ease;
  38. }
  39. .product-grid .product-image:hover .social{
  40.     opacity: 1;
  41.     left: 0;
  42. }
  43. .product-grid .social li{ margin: 5px 0; }
  44. .product-grid .social li a{
  45.     color: #fff;
  46.     background: #033772;
  47.     font-size: 16px;
  48.     line-height: 40px;
  49.     width: 40px;
  50.     height: 40px;
  51.     display: block;
  52.     position: relative;
  53.     transition: all .3s ease;
  54. }
  55. .product-grid .social li a:hover{ background: #1f72ce; }
  56. .product-grid .social li a:before{
  57.     content: attr(data-tip);
  58.     color: #fff;
  59.     background-color:#1f72ce;
  60.     font-size: 13px;
  61.     font-weight: 600;
  62.     line-height: 22px;
  63.     padding: 9px 12px;
  64.     white-space: nowrap;
  65.     visibility: hidden;
  66.     position: absolute;
  67.     left: 100%;
  68.     top: 0;
  69.     transition: all 0.3s ease;
  70. }
  71. .product-grid .social li a:hover:before{ visibility: visible; }
  72. .product-grid .product-content{
  73.     width: 100%;
  74.     padding: 12px 0;
  75.     display: inline-block;
  76. }
  77. .product-grid .title{
  78.     margin: 0 0 7px;
  79.     font-size: 16px;
  80.     font-weight: 600;
  81.     text-transform: capitalize;
  82. }
  83. .product-grid .title a{
  84.     color: #000;
  85.     transition: all 0.4s ease-out;
  86. }
  87. .product-grid .title a:hover{ color: #033772; }
  88. .product-grid .price{
  89.     color: #000;
  90.     font-size: 16px;
  91.     font-weight: 600;
  92.     width: calc(100% - 100px);
  93.     margin: 0 0 10px;
  94.     display: inline-block;
  95. }
  96. .product-grid .price span{
  97.     color: #7a7a7a;
  98.     font-size: 15px;
  99.     text-decoration: line-through;
  100.     margin-right: 5px;
  101.     display: inline-block;
  102. }
  103. .product-grid .rating{
  104.     padding: 0;
  105.     margin: 0;
  106.     list-style: none;
  107.     display: inline-block;
  108.     float: right;
  109. }
  110. .product-grid .rating li{
  111.     color: #ffc500;
  112.     font-size: 13px;
  113. }
  114. .product-grid .rating li.far{ color: #bababa; }
  115. .product-grid .add-to-cart{
  116.     color: #000;
  117.     background: #fff;
  118.     font-size: 13px;
  119.     font-weight: 600;
  120.     text-align: left;
  121.     width: 75%;
  122.     margin: 0 auto;
  123.     border: 1px solid #033772;
  124.     display: block;
  125.     transition: all .3s ease;
  126. }
  127. .product-grid .add-to-cart:hover{
  128.     color: #fff;
  129.     background: #033772;
  130. }
  131. .product-grid .add-to-cart i{
  132.     color: #fff;
  133.     background-color: #033772;
  134.     text-align: center;
  135.     line-height: 35px;
  136.     height: 35px;
  137.     width: 35px;
  138.     border-right: 1px solid #fff;
  139.     display: inline-block;
  140. }
  141. .product-grid .add-to-cart span{
  142.     text-align: center;
  143.     line-height: 35px;
  144.     height: 35px;
  145.     width: calc(100% - 40px);
  146.     padding: 0 6px;
  147.     vertical-align: top;
  148.     display: inline-block;
  149. }
  150. @media only screen and (max-width:990px){
  151.     .product-grid{ margin: 0 0 30px; }
  152. }
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

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

创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

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

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