Hướng Dẫn Tạo Hiệu Ứng Ánh Sáng Lấp Lánh Khi Rê Chuột Vào Ảnh Bài Viết WordPress

Trong bối cảnh công nghệ thông tin ngày càng phát triển, việc tạo ra một website không chỉ đơn thuần là nơi đăng tải thông tin mà còn cần mang lại trải nghiệm thú vị cho người dùng. Hiểu được điều này, trong bài viết hôm nay, tôi sẽ hướng dẫn các bạn, đặc biệt là những người mới bắt đầu với WordPress, cách tạo hiệu ứng ánh sáng lấp lánh khi rê chuột vào ảnh bài viết. Hiệu ứng này không chỉ đẹp mắt mà còn có thể thu hút người dùng lướt xem lâu hơn trên trang của bạn.

Điều Kiện Và Yêu Cầu

Để có thể thực hiện theo hướng dẫn này, bạn cần đảm bảo một số yêu cầu sau:

Nền tảng: Sử dụng WordPress, khuyến khích là phiên bản 5 trở lên.
Theme: Flatsome.

Nếu bạn đang sử dụng theme Flatsome, thì bạn chỉ việc làm theo các bước dưới đây là có thể áp dụng thành công hiệu ứng. Nếu bạn sử dụng một theme khác, bạn có thể cần một chút hỗ trợ để tùy biến phù hợp, đừng ngại liên hệ với tôi để nhận được sự hỗ trợ cần thiết.

Bước 1: Copy CSS

Đầu tiên, bạn cần copy đoạn code CSS sau đây. Hãy chắc chắn rằng bạn copy đầy đủ, không thiếu sót bất kỳ phần nào để đảm bảo hiệu ứng có thể hoạt động trơn tru.

.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: Paste CSS

Tiếp theo, bạn vào Giao diện – Tùy biến – Style – Custom CSS. Paste toàn bộ đoạn CSS bạn vừa copy vào đây.

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

Sau khi đã paste code, điều quan trọng là lưu lại thay đổi của bạn. Tiếp theo, bạn có thể truy cập vào trang chủ hoặc trang lưu trữ bài viết để kiểm tra hiệu ứng ánh sáng lấp lánh mà bạn vừa tạo thành công.

Lời Kết

Cảm ơn bạn đã theo dõi bài viết. Hy vọng rằng đoạn code CSS trên sẽ giúp website của bạn trở nên nổi bật và thu hút người dùng hơn. Nếu có bất kỳ thắc mắc hay vấn đề gì trong quá trình thực hiện, đừ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 quả mà hiệu ứng này mang lại!