.product-grid{
font-family: 'Lora', serif;
text-align: center;
margin: 0 0 22px;
border: 1px solid #e5e5e5;
transition: all .4s ease-out;
}
.product-grid:hover{ border-color: #62d2a2; }
.product-grid .product-image{ position: relative; }
.product-grid .product-image a.image{ display: block; }
.product-grid .product-image img{
width: 100%;
height: auto;
transition: all 0.4s ease 0s;
}
.product-grid:hover .product-image img{ opacity: 0.6; }
.product-grid .quick-view{
color: #62d2a2;
background-color: #fff;
font-size: 16px;
line-height: 45px;
width: 45px;
height: 45px;
border: 1px solid #62d2a2;
border-radius: 50%;
opacity: 0;
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
transition: all .4s ease-out;
}
.product-grid .quick-view:hover{
color: #fff;
background: #62d2a2
}
.product-grid:hover .quick-view{ opacity: 1; }
.product-grid .product-content{
padding: 15px;
position: relative;
}
.product-grid .rating{
color: #e98b50;
font-size: 0;
padding: 0;
margin: 0 0 10px;
list-style: none;
}
.product-grid .rating li{
font-size: 10px;
margin: 0 1px;
}
.product-grid .rating .far{ color: #999; }
.product-grid .title{
color: #555;
font-size: 16px;
margin: 0;
}
.product-grid .title:after{
content: "";
background-color: #e5e5e5;
width: 40px;
height: 1px;
margin: 12px auto 10px;
display: block;
clear: both;
}
.product-grid .title a{
color: #555;
transition: all 0.3s ease 0s;
}
.product-grid .title a:hover{ color: #62d2a2; }
.product-grid .price{
color: #62d2a2;
font-size: 18px;
font-weight: 700;
margin: 0 0 20px;
}
.product-grid .product-links{
width: 165px;
padding: 0;
margin: 0;
list-style: none;
transform: translateX(-50%);
position: absolute;
bottom: -22px;
left: 50%;
transition: all 0.3s ease-in-out;
}
.product-grid .product-links li{
display: inline-block;
margin: 0 3px;
transition: all 0.3s ease;
}
.product-grid .product-links li:nth-child(1){ transform: translateX(55px); }
.product-grid .product-links li:nth-child(3){ transform: translateX(-54px); }
.product-grid:hover .product-links li:nth-child(1){ transform: translateX(0); }
.product-grid:hover .product-links li:nth-child(3){ transform: translateX(0); }
.product-grid .product-links li a{
color: #62d2a2;
background: #fff;
font-size: 18px;
line-height: 45px;
height: 45px;
width: 45px;
border: 1px solid #62d2a2;
border-radius: 50px;
display: block;
position: relative;
z-index: 1;
transition: all 0.4s ease 0s;
}
.product-grid .product-links li a:hover{
color: #fff;
background: #62d2a2;
}
.product-grid .product-links li a:before,
.product-grid .product-links li a:after,
.product-grid .quick-view:before,
.product-grid .quick-view:after{
content: attr(data-tip);
color: #fff;
background: #333;
font-size: 12px;
line-height: 22px;
padding: 2px 7px;
white-space: nowrap;
display: none;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: -35px;
transition: all 0.3s;
}
.product-grid .product-links li a:after,
.product-grid .quick-view:after{
content: '';
height: 15px;
width: 15px;
padding: 0;
border-radius: 0;
transform: translateX(-50%) rotate(45deg);
top: -22px;
z-index: -1;
}
.product-grid .product-links li a:hover:before,
.product-grid .product-links li a:hover:after,
.product-grid .quick-view:hover:before,
.product-grid .quick-view:hover:after{
display: block;
}
@media screen and (max-width: 990px){
.product-grid{ margin: 0 0 52px; }
}