Trang demo để thực hiện đoạn code hướng dẫn sử dụng các nền tảng như sau:
- Nền tảng: WordPress 5.1
- Theme: Flatsome
- Plugin sử dụng: Woocommerce
Nếu bạn cũng đang sử dụng website có thông tin giống như mình vừa liệt kê thì cứ an tâm copy – paste theo hướng dẫn là sẽ thực hiện thành công.
Trường hợp bạn nào không làm được hoặc gặp lỗi khi dán, hãy comment để mình kiểm tra giúp!
Tạo hiệu ứng ánh sáng lướt qua khi hover vào ảnh sản phẩm Woocommerce
Bước 1: Copy đoạn CSS dưới đây
Bạn copy toàn bộ đoạn code CSS dưới đây:
Đoạn CSS này sẽ làm việc với class .product-small .box-image. Do vậy, các sản phẩm Woocommerce nào trong website có ảnh đại diện, đoạn css đều áp dụng hiệu ứng này nhé!
.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
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é! (Các theme khác sẽ gần tương tự)
Bước 3: Lưu lại và kiểm tra
Các bạn Save lại thao tác và ra trang chủ hoặc trang sản phẩm để xem hiệu ứng đã xuất hiện nhé!
Lời kết
Cám ơn các bạn đã theo dõi và ủng hộ. Chúc các bạn sử dụng đoạn code CSS Tạo hiệu ứng ánh sáng khi Hover Ảnh Sản Phẩm WooCommerce hiệu quả nhé!
