|
<div class="product-grid">
<div class="product-image">
<a href="#" class="image">
<img class="pic-1" src="img-3.jpg">
<img class="pic-2" src="img-4.jpg">
</a>
<span class="product-discount-label">-30%</span>
<a class="product-like-icon" href="#"><i class="far fa-heart"></i></a>
</div>
<div class="product-content">
<h3 class="title"><a href="#">女式棉质上衣</a></h3>
<ul class="rating">
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
</ul>
<div class="price"><span>$27.00</span> $18.00</div>
<a class="add-to-cart" href="">加入购物车</a>
</div>
</div>
<style>
.product-grid{
font-family: 'Quicksand', sans-serif;
text-align: center;
margin-top:100px;
}
.product-grid .product-image{
position: relative;
overflow: hidden;
}
.product-grid .product-image a.image{
border: 1px solid #e1e1e1;
display: block;
}
.product-grid .product-image img{
width: 100%;
height: auto;
}
.product-image .pic-1{
/* backface-visibility: hidden; */
/* transition: all 0.5s; */
}
.product-grid:hover .product-image .pic-1{
opacity: 0;
filter: blur(10px);
}
.product-image .pic-2{
width: 100%;
height: 100%;
backface-visibility: hidden;
opacity: 0;
filter: blur(10px);
position: absolute;
top: 0;
left: 0;
transition: all 0.5s;
}
.product-grid:hover .product-image .pic-2{
opacity: 1;
filter: blur(0);
} | 
转播
