CSS hiệu ứng ánh sáng hover ảnh sản phẩm Woocommerce WordPress theme Flatsome, tức là mình sẽ hướng dẫn mọi người thêm hiệu ứng ánh sáng đẹp mắt khi rê chuột vào ảnh sản phẩm Woocommerce nhé!
CSS hiệu ứng ánh sáng hover ảnh sản phẩm Woocommerce WordPress theme Flatsome
Bước 1: Copy CSS
Đoạn CSS dưới sẽ làm việc với class .product-small .box-image. Bất kỳ sản phẩm Woocommerce nào có hình đại diện trên trang web của bạn sẽ được áp dụng hiệu ứng này!
.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)
}
Bước 2: Paste CSS
Các bạn vào Giao diện – Tùy biến – Style – Custom CSS. Paste toàn bộ đoạn CSS ở trên vào nhé!
Bước 3: Lưu lại và hưởng thành quả
Các bạn Save lại thao tác và ra trang chủ hoặc trang lưu trữ bài viết để xem sự thay đổi nhé!
Lời kết
Cám ơn các bạn đã quan tâm theo dõi và ủng hộ SCV WEB. Chúc các bạn sử dụng hiệu quả đoạn code CSS hiệu ứng ánh sáng hover ảnh sản phẩm Woocommerce WordPress theme Flatsome trên! Hãy cho SCV WEB biết trong các nhận xét nếu bạn có bất kỳ câu hỏi hoặc lỗi nào.
