Một đoạn CSS ngắn giúp ảnh sản phẩm WooCommerce có hiệu ứng ánh sáng lướt qua khi rê chuột.
Hiệu ứng ánh sáng lướt qua ảnh khi rê chuột giúp lưới sản phẩm sinh động hơn mà không làm chậm trang.
Cách thực hiện
- Vào Giao diện > Tùy biến > CSS bổ sung.
- Thêm lớp giả ::before cho khung ảnh sản phẩm, nền gradient trắng trong suốt.
- Dùng transition để dịch chuyển lớp này từ trái sang phải khi rê chuột.
- Lưu lại và kiểm tra trên trang cửa hàng.
Lưu ý chỉ áp dụng cho khung ảnh có overflow: hidden để hiệu ứng không tràn ra ngoài.
