Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome
Chào Cả nhà, giả dụ ai để ý sở hữu thể thấy những loại Theme mới đây của Chowebs.vn sử dụng hiệu ứng ánh sáng trượt lóng lánh lúc rê chuột vào ảnh bài viết. Có một số bạn thích hiệu ứng CSS ấy và muốn hướng dẫn cách làm cho. Thành ra, bữa nay viết chỉ dẫn cho Các bạn khác có thể khiến theo luôn!
Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome
Điều kiện & đề nghị
Bài viết này chỉ cho Các bạn mới học khiến cho website WordPress, với mục đích khiến cho sao chỉ cần copy – paste là có thể làm cho được (đôi bất chợt cần hiểu). Thành ra, lưu ý 1 số điều sau!
- Nền tảng: WordPress (khuyến khích WP 5 trở lên)
- Theme Flatsome
Demo khiến website dùng theme Flatsome nên bạn nào đang sở hữu theme Flatsome thì cứ an tâm hoàn toàn, chỉ cần copy – paste theo đúng như hướng dẫn là OK. Những bạn khác không sử dụng theme Flatsome thì mang thể liên hệ để được support riêng nhé!
Tạo hiệu ứng ánh sáng óng ánh khi hover vào ảnh bài viết
[caption id="attachment_2591" align="alignnone" width="590"]
Tạo hiệu ứng ánh sáng lóng lánh khi hover vào ảnh bài viết[/caption]
Bước 1: Copy CSS
Anh chị copy phần nhiều đoạn code CSS dưới đây nhé! Đừng vô số kẻo ko thành công!
Đoạn CSS dưới sẽ làm cho việc với class .post-item .box-image. vì vậy, bất cứ bài viết nào trong website có ảnh đại diện nó đều vận dụng hiệu ứng này Cả nhà nhé!
|
một
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.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
Anh chị em vào Giao diện – Tùy biến – Style – Custom CSS. Paste đông đảo đoạn CSS ở trên vào nhé!
Bước 3: Lưu lại và hưởng thành tựu
Các bạn Save lại thao tác và ra trang chủ hoặc trang lưu trữ bài viết để xem sự đổi thay nhé!
Lời kết
Cám ơn Anh chị đã quan tâm theo dõi và ủng hộ. Chúc Anh chị em tiêu dùng đoạn code CSS trên hiệu quả nhé!
Nhận xét
Đăng nhận xét