Chào mừng các bạn đến với blog của mình! Trong bài viết hôm nay, chúng ta sẽ cùng nhau khám phá một phần quan trọng của trải nghiệm người dùng trực tuyến trên các trang web thương mại điện tử, đó là hiệu ứng ánh sáng khi hover ảnh sản phẩm trên nền tảng Woocommerce.
Việc tạo hiệu ứng này không chỉ là một cách để làm cho trang web của bạn trở nên chuyên nghiệp hơn mà còn tăng tính tương tác và thu hút sự chú ý từ khách hàng. Trong bài viết này, mình sẽ hướng dẫn các bạn bằng cách sử dụng CSS để đạt được hiệu ứng ánh sáng mượt mà khi di chuột qua ảnh sản phẩm trên Woocommerce.
Đoạn code đã được test trên:
- Nền tảng: WordPress 5.8
- Theme: Flatsome
- Plugin sử dụng: Woocommerce
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
Vui lòng copy toàn bộ code CSS được cung cấp dưới đây. Đảm bảo bạn đã copy đủ và không bỏ sót bất kỳ phần nào để đạt được kết quả mong muốn.
Code CSS dưới đây được thiết kế để tương tác với class .product-small .box-image. Điều này đồng nghĩa rằng bất kỳ sản phẩm Woocommerce nào trên trang web của bạn có ảnh đại diện sẽ áp dụng hiệu ứng này. Hãy chắc chắn rằng bạn áp dụng code này chính xác để tận dụng đầy đủ tính năng của hiệu ứng.
.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)
}
Nếu bạn không chèn được, có thể inbox mình qua Facebook cá nhân hoặc Fanpage mình chèn cho, phí là 50k nha :D
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 và Trải nghiệm
Sau khi bạn đã hoàn tất quá trình chỉnh sửa code CSS, đừng quên lưu lại. Nhấn nút “Save” hoặc “Lưu” để áp dụng các thay đổi bạn đã thực hiện. Tiếp theo, truy cập trang chủ hoặc trang danh mục sản phẩm để thưởng thức ngay lập tức sự thay đổi và hiệu ứng mới mà bạn đã tích hợp vào ảnh sản phẩm Woocommerce. Điều này giúp bạn đảm bảo rằng mọi thứ hoạt động đúng như mong đợi và trang web của bạn trở nên độc đáo và chuyên nghiệp hơn.
Tổng kết
Trong bài viết này, CongVietBlog đã hướng dẫn cách tạo hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS. Qua các bước chi tiết, từ việc copy CSS đến lưu và trải nghiệm, chúng ta đã có cơ hội làm cho trang web thương mại điện tử trở nên hấp dẫn hơn và chuyên nghiệp hơn. Việc áp dụng hiệu ứng này không chỉ tăng cường tính tương tác mà còn tạo ra trải nghiệm người dùng độc đáo. Hãy áp dụng ngay để tận hưởng sự đổi mới và nâng cao chất lượng trực tuyến của bạn!
- Chia sẻ File Photoshop quảng cáo Mỹ Phẩm ra nhiều data nhất của Công Việt Blog
- Hướng dẫn chèn Messenger Facebook vào Website
- Hướng dẫn Chèn Hình Ảnh Quảng Cáo 2 bên website ẩn trên Mobile
- Hướng dẫn tạo Widget Dashboard WordPress chi tiết
- Chia sẻ 500+ Font chữ Tiếng Việt mà CongVietIT dùng trong Design
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của CongVietBlog để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy CongVietBlog trên Facebook.
