Chào mừng các bạn đến với blog của mình! Hôm nay, chúng ta sẽ cùng nhau khám phá một chủ đề hấp dẫn trong lập trình web, đó là “Hướng dẫn tạo hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome”. Theme Flatsome nổi tiếng với thiết kế hiện đại, linh hoạt và đặc biệt là sự dễ dàng tùy chỉnh.
Trong bài viết này, mình sẽ chia sẻ với các bạn cách tận dụng sức mạnh của CSS để tạo ra một hiệu ứng ánh sáng tuyệt vời khi người dùng di chuột vào ảnh trong bài viết. Chúng ta sẽ bắt đầu bằng cách hiểu rõ về cấu trúc CSS của Flatsome, sau đó tùy chỉnh mã để đạt được kết quả mong muốn.
Điều kiện & Yêu cầu
Bài viết này được tạo ra đặc biệt dành cho những bạn đang ở giai đoạn mới học làm website trên nền tảng WordPress, với mục tiêu làm cho quá trình tạo ra trang web trở nên dễ dàng hơn thông qua việc copy – paste mà không cần phải hiểu rõ mọi chi tiết. Vì vậy, mong rằng các bạn sẽ chú ý đến một số điều quan trọng dưới đây!
- Nền tảng: WordPress (Chúng tôi khuyến khích việc sử dụng phiên bản WP 5 trở lên)
- Theme: Flatsome
Nếu bạn đang sử dụng theme Flatsome, đừng lo lắng, vì bài viết được thực hiện trên nền tảng này. Chỉ cần thực hiện theo hướng dẫn mà tôi cung cấp, bạn có thể dễ dàng copy – paste để thực hiện các thay đổi mong muốn. Những bạn sử dụng theme khác ngoài Flatsome có thể liên hệ trực tiếp để nhận hỗ trợ cá nhân.
Mục tiêu của chúng tôi là giúp bạn tiếp cận việc xây dựng trang web một cách linh hoạt và thuận tiện nhất, đặc biệt là khi sử dụng theme Flatsome. Hãy bắt đầu hành trình của bạn với sự tự tin, và nếu bạn gặp bất kỳ vấn đề nào, đừng ngần ngại liên hệ để nhận sự hỗ trợ tận tâm từ chúng tôi!
Tạo hiệu ứng ánh sáng lấp lánh khi hover vào ảnh bài viết
Bước 1: Sao chép CSS
Vui lòng sao chép toàn bộ đoạn mã CSS dưới đây một cách chính xác! Đảm bảo không bỏ sót bất kỳ phần nào để đạt được kết quả mong muốn.
Đoạn mã CSS này được thiết kế để tương tác với class .post-item .box-image. Điều này có nghĩa là bất kỳ bài viết nào trên trang web của bạn có hình ảnh đại diện, hiệu ứng sẽ được áp dụng tự động. Hãy đảm bảo rằng bạn thực hiện bước này một cách chính xác để đạt được kết quả mà bạn mong đợi!
.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, 0.3) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
transition: left 0.75s ease-in-out;
}
.post-item .box-image:hover::before {
left: 125%;
}
@keyframes shine {
100% {
left: 125%;
}
}
Giải thích
Đoạn mã CSS trên được thiết kế để tạo hiệu ứng ánh sáng khi di chuột (hover) vào hình ảnh đại diện của bài viết trong website, với sự sử dụng của ::before pseudo-element. Dưới đây là giải thích chi tiết:
BẠN CHƯA ĐĂNG NHẬP
Hãy đăng nhập để xem nội dung này!
Bước 2: Dán CSS
Các bạn vào Giao diện –> Tùy biến –> Style –> Custom CSS. Dán toàn bộ đoạn CSS ở trên vào nhé!
Nếu bạn không chèn được, có thể inbox mình qua Facebook cá nhân hoặc Fanpage mình chèn cho, phí là 50k nha :D
Bước 3: Lưu và Trải Nghiệm Kết Quả
Sau khi đã thực hiện các chỉnh sửa, hãy nhớ lưu lại để áp dụng các thay đổi. Bạn có thể chọn tùy chọn “Save” hoặc “Lưu” tùy thuộc vào giao diện của trình soạn thảo bạn đang sử dụng.
Tiếp theo, hãy truy cập trang chủ hoặc trang lưu trữ bài viết để trải nghiệm trực tiếp sự thay đổi mà bạn vừa thực hiện. Hover chuột vào hình ảnh đại diện của bài viết và bạn sẽ nhận thấy hiệu ứng ánh sáng tinh tế mà bạn đã thêm vào. Hãy thưởng thức thành quả của công việc bạn vừa hoàn thành và đảm bảo rằng nó đáp ứng đúng như mong đợi của bạn!
Tổng kết
Bài viết này hướng dẫn cách tạo hiệu ứng ánh sáng khi di chuột vào ảnh bài viết trong theme Flatsome trên WordPress. Đầu tiên, bạn cần sao chép đoạn mã CSS và thực hiện theo bước hướng dẫn. Sau đó, lưu lại và trải nghiệm kết quả trên trang chủ hoặc trang lưu trữ bài viết. Hiệu ứng ánh sáng sẽ tạo ra một trải nghiệm tốt hơn cho người đọc của bạn. Hãy áp dụng ngay để làm trang web của bạn trở nên thú vị hơn!
- Sử dụng plugin Advanced Custom Fields tạo bảng thông số kỹ thuật và khuyến mại
- Hướng dẫn tạo nút liên hệ đa kênh cho Website WordPress
- Hướng dẫn trang trí cành Mai – Câu đối đón Tết cho Website
- Ẩn thông báo cập nhật WordPress khỏi tất cả người dùng ngoại trừ quản trị viên
- 1500+ hiệu ứng chuyển cảnh tuyệt đẹp cho After Effects
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của CongVietBlog để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy CongVietBlog trên Facebook.
