31 C
Hanoi
Chủ Nhật, Tháng Sáu 16, 2024
spot_img

Hướng dẫn tạo hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS

Truy cập:

Chia sẻ:

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.

Hướng dẫn tạo hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS

Đoạn code đã được test trên:

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

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)
}

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é!

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.

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!

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.

5 1 đánh giá
Đánh giá
Công Việt Blog
Công Việt Bloghttps://congvietit.com
Chào các bạn, mình là Công Việt, mình đến từ kênh Youtube Công Việt Blog. Blog này hiểu đơn giản mình viết những thứ mình học được, áp dụng được và cung cấp những tài nguyên mà mình sử dụng, cũng là nơi để mình lưu trữ tài nguyên. Phần "Thành viên VIP" với gói chỉ 50k để giúp mình duy trì website mà thôi, hi vọng được sự ủng hộ của các bạn.
Theo dõi
Thông báo về
guest
0 Bình luận
Inline Feedbacks
View all comments
banner quang cao hostinger-congvietblog-congvietit
ma giam gia khi mua hosting vps congvietitcom

Bài viết liên quan

4 Cách xóa các mã Shortcode không sử dụng khỏi WordPress

Shortcode — công cụ tiết kiệm thời gian tuyệt vời cho nhiều quản trị viên WordPress đang tìm...

Bài 01 – Giới thiệu về WordPress

WordPress là một hệ thống xuất bản blog viết bằng ngôn ngữ lập trình PHP và sử dụng...

Khắc phục lỗi download file Google Drive qua Woocommerce trong WordPress

Nếu bạn muốn làm site bán sản phẩm có thể Download bằng Wordpress, chắc là cũng nghĩ đến...

Code hiển thị số lượng sản phẩm đã bán cho website WordPress sử dụng Woocommerce

Với đoạn code hiển thị số lượng sản phẩm đã bán cho website Wordpress sử dụng Woocommerce này,...
0
Hãy cho mình xin 1 bình luận nha bạn yêu !!!x