Sử dụng CSS để thêm hiệu ứng ánh sáng khi di chuột vào hình ảnh sản phẩm Woocommerce

Xin chào các bạn, trong bài viết lần trước mình đã hướng dẫn các bạn thêm hiệu ứng ánh sáng trượt khi di chuột vào post ảnh của theme Flatsome rồi phải không? Hôm nay mình sẽ tiếp tục hướng dẫn các bạn thêm hiệu ứng ánh sáng đẹp mắt khi di chuột vào ảnh sản phẩm Woocommerce nhé!

Điều kiện & yêu cầu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS

Bài viết này hướng dẫn các bạn thực hành trong quá trình làm website. Kiến thức có thể có giá trị đối với nhiều người, nhưng có lẽ nó không còn xa lạ với một số bạn. Vậy mọi người cao thủ xem có sai sót gì xin hãy khai sáng giúp mình với!

Trang demo triển khai mã hướng dẫn có các thông số sau:

• Nền tảng: WordPress 5.1
• Theme: Flatsome
• Plugin sử dụng: Woocommerce

Vì vậy, nếu bạn cũng có một trang web hoàn toàn trùng khớp với thông tin tôi vừa liệt kê, chỉ cần làm theo hướng dẫn copy và paste là bạn sẽ thành công!

Nếu không làm được hoặc gặp lỗi các bạn để lại comment để mình tìm cách giải quyết nhé!

Tạo hiệu ứng ánh sáng lấp lánh khi hover vào ảnh sản phẩm Woocommerce

Bước 1: Copy CSS tạo hiệu ứng ánh sáng lấp lánh khi hover

Vui lòng sao chép toàn bộ mã CSS bên dưới! Đừng thiếu thứ gì để tránh thất bại!

CSS sau sẽ được sử dụng với class .product-small .box-image. Do đó, bất kỳ sản phẩm Woocommerce nào có ảnh đại diện trên website đều được áp dụng hiệu ứng này nhé các bạn!

Bước 2: Paste CSS tạo hiệu ứng ánh sáng lấp lánh khi hover

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ả tạo hiệu ứng ánh sáng lấp lánh khi hover

Vui lòng lưu lại thao tác và vào trang chủ hoặc trang lưu trữ bài viết để xem các thay đổi!

Lời kết

Cảm ơn bạn đã quan tâm và ủng hộ T3tcode.com. Hy vọng bạn sử dụng mã CSS trên một cách hiệu quả! Nếu bạn có bất kỳ câu hỏi hoặc sai sót, vui lòng cho tôi biết trong phần bình luận