:root{
--gray: #888;
--black: #222;
--main-color: #4b7bec;
}
.product-grid{
font-family: 'Work Sans', sans-serif;
overflow: hidden;
}
.product-grid .product-image{
overflow: hidden;
position: relative;
}
.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 0.5s ease 0s;
}
.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 0.5s ease 0s;
}
.product-grid:hover .product-image .pic-2{ opacity: 1; }
.product-grid .social{
padding: 0;
margin: 0;
list-style: none;
opacity: 0;
position: absolute;
bottom: 10px;
right: -100px;
transition: all 0.5s;
}
.product-grid:hover .social{
opacity: 1;
right: 10px;
}
.product-grid .social li a{
color: var(--gray);
background: #fff;
font-size: 17px;
text-align: center;
line-height: 45px;
width: 45px;
height: 45px;
margin: 0 0 5px;
display: block;
transition: all 0.3s;
}
.product-grid .social li a:hover{
color: #fff;
background: var(--main-color);
}
.product-grid .product-content{
padding: 15px 0;
position: relative;
}
.product-grid .add-to-wishlist{
color: var(--gray);
font-size: 15px;
position: absolute;
top: 10px;
right: 7px;
z-index: 1;
transition: all 0.3s;
}
.product-grid .add-to-wishlist:hover{ color: var(--main-color); }
.product-grid .title{
font-size: 15px;
font-weight: 500;
text-transform: capitalize;
margin: 0 0 10px;
}
.product-grid .title a{ color: var(--gray); }
.product-grid .title a:hover{ color: var(--main-color); }
.product-grid .price{
color: var(--black);
font-size: 15px;
font-weight: 800;
transition: all 0.3s;
}
.product-grid:hover .price{ opacity: 0; }
.product-grid .add-to-cart{
color: var(--black);
font-size: 15px;
font-weight: 600;
opacity: 0;
position: absolute;
bottom: 15px;
left: -100px;
transition: all 0.5s;
}
.product-grid .add-to-cart:hover{ color: var(--main-color); }
.product-grid:hover .add-to-cart{
left: 0;
opacity: 1;
}
@media only screen and (max-width:990px){
.product-grid{ margin-bottom: 30px; }
}