css3实现指到图片时切换更换为另一张图片

<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);
}