.product-grid{ font-family: 'Lato', sans-serif; text-align: center; } .product-grid .product-image{ overflow: hidden; position: relative; } .product-grid .product-image a.image{ display: block; } .product-grid .product-image img{ width: 100%; height: auto; transition: all 0.5s ease 0s; } .product-grid:hover .product-image img{ transform-origin: top center; transform: scale(1.3); } .product-grid .product-sale-label{ color: #fff; background: #fc7628; font-size: 15px; font-weight: 600; text-transform: capitalize; padding: 5px 8px; position: absolute; top: 7px; right: 7px; } .product-grid .product-full-view{ color: #fff; background-color: #6BCE3A; line-height: 35px; height: 45px; width: 45px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); opacity: 0; transform: translateX(-50%) translateY(-50%) scale(0); position: absolute; left: 50%; top: 50%; transition: all 0.3s ease 0s; } .product-grid:hover .product-full-view{ opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); } .product-grid .product-full-view:hover{ background-color: #fc7628; } .product-grid .product-content{ padding: 15px 10px; } .product-grid .title{ font-size: 17px; font-weight: 600; text-transform: capitalize; margin: 0 0 10px; } .product-grid .title a{ color: #555; transition: all 0.3s ease 0s; } .product-grid .title a:hover{ color: #6BCE3A; } .product-grid .price{ color: #6BCE3A; font-size: 18px; font-weight: 700; margin: 0 0 12px; } .product-grid .price span{ color: #bbb; font-size: 17px; text-decoration: line-through; } .product-grid .product-links{ padding: 0; margin: 0; list-style: none; } .product-grid:hover .product-links{ transform: scaleX(1); } .product-grid .product-links li{ margin: 0 1px; display: inline-block; } .product-grid .product-links li a{ color: #999; font-size: 15px; font-weight: 600; text-align: center; line-height: 34px; width: 35px; height: 35px; border-radius: 50px; border: 1px solid #999; overflow: hidden; display: block; transition: all 0.5s ease 0s; } .product-grid .product-links li:nth-child(2) a{ color: #fff; background-color: #6BCE3A; width: auto; padding: 0 15px; border: none; } .product-grid .product-links li a:hover{ color: #6BCE3A; border-color: #6BCE3A; } .product-grid .product-links li:nth-child(2) a:hover{ color: #fff; background-color: #fc7628; } @media screen and (max-width: 990px){ .product-grid{ margin-bottom: 30px; } }