Hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce

Các bạn vào

Giao diện – Tùy biến – Style – Custom CSS

Paste toàn bộ đoạn CSS ở dưới đây vào

.product-small .box-image:hover::before{
-webkit-animation:shine .75s;animation:shine .75s
}
@-webkit-keyframes shine{
100%{left:125%}
}
@keyframes shine{
100%{left:125%}
}
.product-small .box-image::before{
position:absolute;
top:0;
left:-75%;
z-index:2;
display:block;
content:”;
width:50%;
height:100%;
background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
-webkit-transform:skewX(-25deg);transform:skewX(-25deg)
}

Các bạn Save lại và kiểm tra sự thay đổi nhé

Thả vào đây ý kiến của bạn:

avatar