Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome

Trong thiết kế website doanh nghiệp, việc chú trọng vào các chi tiết vi tương tác (micro-interactions) đóng vai trò quan trọng giúp nâng cao trải nghiệm thị giác và thu hút sự chú ý của khách hàng. Một trong những hiệu ứng thị giác đơn giản nhưng mang lại sự tinh tế cho website chính là hiệu ứng ánh sáng trượt (Shine Hover Effect) khi người dùng di chuột qua hình ảnh đại diện của bài viết.

Đối với các website đang vận hành trên nền tảng WordPress sử dụng Theme Flatsome, bạn hoàn toàn có thể tự thêm tính năng này một cách dễ dàng thông qua đoạn mã CSS tùy chỉnh mà không làm ảnh hưởng đến tốc độ tải trang.

Lợi ích của hiệu ứng ánh sáng khi di chuột qua ảnh

• Tăng tính tương tác: Tạo phản hồi thị giác ngay lập tức khi người dùng thao tác rê chuột vào bài viết, giúp giao diện trở nên sinh động hơn.
• Nâng cao tính thẩm mỹ: Đem lại cảm giác hiện đại, chỉn chu cho trang tin tức, blog hoặc danh mục sản phẩm.
• Không ảnh hưởng đến hiệu suất: Sử dụng thuần CSS3 (Animation & Gradient), không cần cài đặt thêm plugin phức tạp, giúp tối ưu chi phí tài nguyên server.

Điều kiện chuẩn bị

Để áp dụng hướng dẫn này, hệ thống của bạn cần đáp ứng các yêu cầu kỹ thuật cơ bản sau:

• Website chạy trên nền tảng WordPress (Khuyến nghị phiên bản 5.0 trở lên).
• Giao diện đang sử dụng là Flatsome Theme.
• Quyền quản trị viên để truy cập vào trình tùy biến giao diện (Customizer).

Hướng dẫn cài đặt hiệu ứng ánh sáng cho Flatsome Theme

Bước 1: Sao chép đoạn mã CSS chuyên dụng

Hiệu ứng này can thiệp vào cấu trúc class mặc định .post-item .box-image của Flatsome. Bạn tiến hành sao chép toàn bộ đoạn mã CSS dưới đây:

.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: Cấu hình mã CSS vào giao diện WordPress

1. Đăng nhập vào trang quản trị WordPress (Dashboard).
2. Điều hướng đến Giao diện (Appearance) > Tùy biến (Customize).
3. Tại menu tùy biến, chọn mục Style > Custom CSS.
4. Dán toàn bộ đoạn mã CSS đã copy ở Bước 1 vào khung làm việc tương ứng.

Bước 3: Kiểm tra và lưu cấu hình

Sau khi dán mã, nhấn nút Đăng (Publish) để lưu lại các thay đổi. Truy cập ra trang chủ hoặc trang danh mục tin tức, rê chuột vào hình ảnh bài viết bất kỳ để kiểm tra hiệu ứng ánh sáng trượt vừa thiết lập.

Một số lưu ý kỹ thuật khi tùy biến

• Phạm vi áp dụng: Đoạn mã trên áp dụng mặc định cho tất cả các khối bài viết sử dụng layout chuẩn của Flatsome (có class .post-item .box-image).
• Tràn viền (Overflow): Hãy đảm bảo thẻ chứa hình ảnh trong thiết lập của bạn đã chọn chế độ overflow: hidden để dải ánh sáng không bị tràn ra ngoài khung hình trong quá trình chuyển động.
• Tùy chỉnh tốc độ: Bạn có thể thay đổi thời gian diễn ra hiệu ứng bằng cách điều chỉnh thông số .75s trong đoạn mã thành giá trị khác tùy theo nhu cầu thẩm mỹ (ví dụ: .5s để nhanh hơn hoặc 1s để chậm hơn).

Lời kết

Chỉ với vài thao tác chèn mã CSS đơn giản, bạn đã giúp giao diện website Flatsome trở nên ấn tượng và mượt mà hơn trong mắt khách hàng. Việc tối ưu từng chi tiết nhỏ chính là yếu tố giúp nâng tầm hình ảnh chuyên nghiệp cho thương hiệu số của doanh nghiệp.

Nếu bạn gặp khó khăn trong quá trình cấu hình hoặc cần tư vấn các giải pháp tùy biến giao diện chuyên sâu cho website WordPress, đội ngũ kỹ thuật tại STAR WAR Digital Solutions luôn sẵn sàng đồng hành và hỗ trợ tối ưu toàn diện cho doanh nghiệp của bạn.