Để tạo hiệu ứng ánh sáng khi di chuột (hover) vào các ảnh bài viết trong theme Flatsome trên trang web WordPress của bạn, bạn có thể tận dụng CSS. Dưới đây, tôi sẽ hướng dẫn bạn cách thực hiện điều này một cách chi tiết và tối ưu hóa cho việc tối ưu hóa công cụ tìm kiếm (SEO).
Bước 1: Đăng nhập vào trang quản trị WordPress của bạn.
Bước 2: Trong menu quản trị WordPress, di chuột vào “Giao diện” và chọn “Tùy chỉnh.”
Bước 3: Trong trình tùy chỉnh, tìm tùy chọn “Thêm CSS Tùy chỉnh” hoặc tương tự. Tùy chọn này có thể nằm ở các vị trí khác nhau tùy theo phiên bản cụ thể của theme Flatsome.
Bước 4: Bây giờ, bạn có thể sử dụng mã CSS sau để thêm hiệu ứng ánh sáng khi di chuột vào ảnh. Đảm bảo rằng bạn thêm mã CSS này vào tùy chọn CSS tùy chỉnh trong trình tùy chỉnh:
.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)
}
Lưu ý rằng mã CSS này chỉ hoạt động với theme Flatsome. Để sử dụng nó cho theme khác, bạn có thể cần sửa lại các lớp CSS để phù hợp.
Ngoài ra, khi sử dụng mã CSS như trên, hãy đảm bảo rằng bạn tuân thủ các quy tắc tối ưu hóa công cụ tìm kiếm (SEO) bằng cách sử dụng các thẻ tiêu đề và mô tả hợp lý cho các ảnh và bài viết của bạn. Điều này giúp cải thiện trải nghiệm người dùng và tối ưu hóa khả năng tìm thấy trang web của bạn trên các công cụ tìm kiếm.