Nếu bạn đang dùng Flatsome theme và muốn làm gallery, banner hoặc box hình ảnh trở nên “lung linh – lạ mắt – cao cấp” hơn, thì đây chính là hiệu ứng bạn cần:
✨ Share CSS Hiệu Ứng ánh sáng sẹt qua Galary Flatsome – Sang Trọng & Độc Đáo – nhẹ nhàng, tinh tế, cực hợp cho các website khách sạn, resort, nội thất, spa, thời trang cao cấp.
Hiệu ứng này giúp ảnh trong gallery hoặc box xuất hiện những ánh sáng sẹt qua khi người dùng rê chuột vào.
Không phải kiểu “sáng chói” hay “kẹt cứng” thường thấy, mà là ánh sáng sẹt qua tự nhiên, nhẹ và sang, tạo cảm giác hình ảnh được phản chiếu ánh sáng thật.
⚙️ Hoạt động trên Flatsome Gallery, UX Builder Box, Banner, Product Box
🎨 Tùy chỉnh được màu sao, tốc độ, độ sáng
🧩 Không cần plugin – chỉ cần dán CSS vào “Tùy chỉnh → CSS bổ sung”
🌈 Hoạt động mượt cả trên mobile và desktop
💻 Code CSS chia sẻ
Dán đoạn code này vào phần CSS bổ sung (Additional CSS) trong WordPress:
/* ===== ÁNH SÁNG SẸT QUA ẢNH (Flatsome Gallery / Image Box) ===== */
.box.has-hover .box-image,
.ux-gallery .box-image {
position: relative;
overflow: hidden;
}
/* Dải ánh sáng */
.box.has-hover .box-image::after,
.ux-gallery .box-image::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-20deg);
opacity: 0;
transition: all 0.6s ease;
pointer-events: none;
}
/* Hover: phóng nhẹ + chạy ánh sáng */
.box.has-hover:hover .box-image img,
.ux-gallery .box:hover .box-image img {
transform: scale(1.05);
transition: all 0.6s ease;
filter: brightness(1.05);
}
.box.has-hover:hover .box-image::after,
.ux-gallery .box:hover .box-image::after {
left: 130%;
opacity: 1;
transition: left 0.8s ease-in-out, opacity 0.4s ease;
}
/* Mượt mà hơn với keyframes */
@keyframes shine {
from { left: -75%; opacity: 0.3; }
to { left: 125%; opacity: 1; }
}
Đây là một trong những hiệu ứng CSS độc đáo nhất cho Flatsome, giúp ảnh sản phẩm, gallery hay banner nổi bật – sang trọng – “có hồn” hơn mà không cần dùng JS hay plugin nặng.
Phù hợp cho mọi site dùng Flatsome: spa, khách sạn, nội thất, thời trang, resort, kiến trúc…