Thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce

Chào mọi người, sau bài viết trước về cách thêm hiệu ứng ánh sáng trượt lên ảnh bài viết, hôm nay chúng ta sẽ tiếp tục khám phá cách tạo hiệu ứng ánh sáng lấp lánh khi di chuột qua ảnh sản phẩm Woocommerce. Bài viết này hứa hẹn sẽ mang lại cho bạn một trải nghiệm thú vị và hiệu quả hơn nếu bạn đang sử dụng theme Flatsome với plugin Woocommerce.

Điều Kiện & Yêu Cầu

Để thực hiện các bước trong bài viết này, bạn cần đảm bảo website của mình đã cài đặt các thành phần sau:

Nền tảng: WordPress phiên bản 5.1 trở lên
Theme: Flatsome (rất phổ biến và thân thiện với người dùng)
Plugin: Woocommerce (cần thiết cho việc quản lý sản phẩm)

Nếu website của bạn đã đủ các điều kiện trên, bạn có thể bắt đầu thực hiện theo các bước dưới đây để tạo hiệu ứng ánh sáng cho ảnh sản phẩm.

Bước Thực Hiện

Bước 1: Copy CSS

Đầu tiên, bạn cần sao chép đoạn mã CSS sau đây. Đảm bảo rằng bạn sao chép đầy đủ để không gặp lỗi trong quá trình thực hiện. Mã CSS này sẽ áp dụng hiệu ứng ánh sáng lấp lánh cho mọi ảnh sản phẩm có trong website của bạn.

.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: Chèn CSS

Sau khi đã sao chép mã CSS, hãy truy cập vào Giao diện →Tùy biến → Style → Custom CSS trên trang quản trị WordPress của bạn và dán đoạn mã vừa sao chép vào.

Bước 3: Lưu và Kiểm Tra

Khi đã dán xong, đừng quên lưu lại thay đổi. Sau đó, bạn có thể truy cập vào trang chủ hoặc bất kỳ trang nào có sản phẩm để kiểm tra hiệu ứng mới đã được áp dụng. Bạn sẽ thấy ảnh sản phẩm của mình nổi bật hơn khi có ánh sáng lấp lánh mỗi khi di chuột qua.

Kết Luận

Cảm ơn bạn đã theo dõi bài viết và thực hiện theo các hướng dẫn. Hi vọng với hiệu ứng ánh sáng mới này, trang web của bạn sẽ thu hút được nhiều khách hàng hơn và tăng trải nghiệm người dùng. Nếu có bất kỳ thắc mắc hoặc vấn đề nào xảy ra trong quá trình thực hiện, đừng ngại để lại bình luận để chúng tôi có thể hỗ trợ bạn. Chúc bạn thành công!