CSS hiệu ứng ánh sáng hover ảnh sản phẩm Woocommerce WordPress theme Flatsome

Đánh giá bài viết

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!

/*hieu ung sang san pham*/
.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)
}
/*hieu ung sang san pham*/

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.

Anh/Chị vui lòng để lại số điện thoại - Zalo để được tư vấn nhanh nhất: [contact-form-7 id="f46dedb" title="Contact Form Flat"]

Quảng cáo Đà Nẵng