Hướng Dẫn Tạo Hiệu Ứng Ánh Sáng Lấp Lánh Khi Hover Vào Ảnh Bài Viết Đơn Giản

Hiệu ứng ánh sáng lấp lánh khi bạn di chuột qua ảnh bài viết không chỉ làm cho trang web của bạn trở nên nổi bật hơn mà còn gây ấn tượng mạnh mẽ với người dùng. Với hướng dẫn chi tiết này, ngay cả những người mới bắt đầu làm quen với WordPress cũng có thể dễ dàng áp dụng được hiệu ứng ấn tượng này mà không cần phải hiểu sâu về code. Chỉ cần làm theo các bước dưới đây!

Yêu cầu Để Thực Hiện

Chúng ta sẽ làm việc với nền tảng WordPress, ưu tiên cho những ai đang sử dụng phiên bản WordPress 5 trở lên và theme Flatsome. Nếu bạn đang sử dụng theme này, chỉ việc copy và paste theo hướng dẫn dưới đây là xong. Nếu bạn dùng theme khác, bạn có thể cần sự hỗ trợ để điều chỉnh cho phù hợp.

Bước 1: Sao Chép CSS

Hãy bắt đầu với việc sao chép đoạn mã CSS sau đây. Đảm bảo bạn sao chép đầy đủ để hiệu ứng có thể hoạt động chính xác.

.post-item .box-image:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% { left: 125%; }
}
@keyframes shine {
    100% { left: 125%; }
}
.post-item .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 vào Website

Tiếp theo, bạn cần đến phần Giao diện -> Tùy biến -> Style -> Custom CSS trên trang quản trị WordPress của mình. Paste toàn bộ đoạn CSS đã sao chép vào phần này.

Bước 3: Lưu và Kiểm Tra Hiệu Ứng

Sau khi đã nhập đoạn mã CSS, đừng quên lưu lại thay đổi. Bây giờ, bạn có thể truy cập trang chủ hoặc trang lưu trữ bài viết để kiểm tra hiệu ứng lấp lánh mới của mình. Hãy thử di chuột qua các ảnh và xem hiệu ứng ấy hoạt động như thế nào!

Kết Luận

Với ba bước đơn giản, bạn đã có thể thêm một hiệu ứng độc đáo vào website WordPress của mình, giúp nó trở nên sinh động và thu hút hơn. Cảm ơn bạn đã theo dõi bài viết này từ Websiteviet.vn. Nếu có bất kỳ thắc mắc hoặc cần hỗ trợ, đừng ngần ngại để lại bình luận phía dưới. Chúc các bạn thành công và hài lòng với hiệu ứng mới!