.product-grid{ font-family: 'Poppins', sans-serif; position: relative; } .product-grid .product-image{ box-shadow: 0 3px 12px -4px rgba(0,0,0,.12); overflow: hidden; position: relative; transition: all 0.3s ease 0s; } .product-grid:hover .product-image{ box-shadow: 0 15px 15px -9px rgba(0,0,0,.3); } .product-grid .product-image a{ display: block; } .product-grid .product-image img{ width: 100%; height: auto; } .product-image .pic-1{ backface-visibility: hidden; transition: all .75s cubic-bezier(.785,.135,.15,.86); } .product-grid:hover .product-image .pic-1 { opacity: 0; } .product-image .pic-2{ width: 100%; height: 100%; opacity: 0; backface-visibility: hidden; position: absolute; top: 0; left: 0; transition: all .75s cubic-bezier(.785,.135,.15,.86); } .product-grid:hover .product-image .pic-2{ opacity: 1; transform: scale(1.09); } .product-grid .product-discount-label, .product-grid .product-hot-label{ color: #fff; background-color: #606060; text-align: center; width: 43px; font-size: 12px; font-weight: 300; letter-spacing: 1px; padding: 4px 0; position: absolute; left: 10px; top: 10px ; } .product-grid .product-hot-label{ background-color: #3867d6; top: 40px; } .product-grid .social{ background-color: #fff; padding: 3px; margin: 0; list-style: none; box-shadow: 0 0 5px rgba(0,0,0,0.12); opacity: 1; position: absolute; right: -100%; top: 15px; transition: all 0.45s ease; } .product-grid:hover .social{ opacity: 1; right: 15px; } .product-grid .social li a{ color: #333; background: #fff; font-size: 15px; text-align: center; line-height: 40px; height: 40px; width: 42px; box-shadow: 0 -4px 5px -5px rgba(0,0,0,.5); display: block; position: relative; transition: all 0.3s ease 0s; } .product-grid .social li:nth-child(1) a{ box-shadow: 0 0 0 0 transparent; } .product-grid .social li a:hover{ color: #3867d6; } .product-grid .social li a:before, .product-grid .social li a:after{ content: attr(data-tip); color: #fff; background-color:#2a2a2a; font-size: 12px; line-height: 22px; white-space: nowrap; padding: 3px 5px; display: none; transform: translateY(-50%); position: absolute; right: 52px; top: 50%; z-index: 1; } .product-grid .social li a:after{ content: ''; height: 15px; width: 15px; border-radius: 0; transform:translateY(-50%) rotate(45deg); right: 50px; z-index: 0; } .product-grid .social li a:hover:before, .product-grid .social li a:hover:after{ display:block; } .product-grid .product-content{ text-align: center; padding: 15px 10px; position: relative; } .product-grid .title{ font-size: 16px; font-weight: 500; margin: 0 0 10px 0; } .product-grid .title a{ color: #222; } .product-grid .title a:hover{ color: #3867d6; } .product-grid .product-category a{ font-size: 12px; color: #959595; margin-bottom: 15px; display: block; } .product-grid .price { color: #3867d6; font-size: 18px; font-weight: 600; margin-bottom: 7px; } .product-grid .price span{ color: #3867d6; font-size: 14px; font-weight: 400; margin: 3px 0 0 2px; text-decoration: line-through; opacity: 0.5; vertical-align: top; display: inline-block; } .product-grid .add-to-cart{ color: #fff; background: #3867d6; font-size: 12px; font-weight: 600; width: 55%; padding: 10px 0; opacity: 0; transform: translateX(-50%); position: absolute; left: 50%; bottom: 16px; transition: all 0.3s linear 0s; } .product-grid .add-to-cart:hover { box-shadow: 0 0 5px #fff inset, 0 0 5px rgba(0,0,0,0.5); text-decoration: none; } .product-grid:hover .add-to-cart { opacity: 1; } @media only screen and (max-width:990px){ .product-grid{ margin-bottom: 30px; } }