Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome
Chào Anh chị, giả dụ người nào quan tâm mang thể thấy các dòng Theme vừa qua của Chowebs.vn dùng hiệu ứng ánh sáng trượt óng ánh khi rê chuột vào ảnh bài viết. Mang một số bạn thích hiệu ứng CSS đó và muốn chỉ dẫn cách khiến cho. Bởi thế, bữa nay viết chỉ dẫn cho Anh chị em khác sở hữu thể khiến theo luôn!
Thêm hiệu ứng ánh sáng lúc hover vào ảnh bài viết trong theme Flatsome
Điều kiện & đề xuất
Bài viết này chỉ cho Các bạn mới học làm cho website WordPress, sở hữu mục đích khiến cho sao chỉ cần copy – paste là với thể khiến cho được (đôi đột nhiên cần hiểu). Bởi vậy, lưu ý 1 số điều sau!
- Nền tảng: WordPress (khuyến khích WP 5 trở lên)
- Theme Flatsome
Demo làm cho website dùng theme Flatsome nên bạn nào đang mang 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. Các bạn khác không dùng theme Flatsome thì sở hữu 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 óng ánh khi hover vào ảnh bài viết[/caption]
Bước 1: Copy CSS
Cả nhà copy phần đông đoạn code CSS dưới đây nhé! Đừng vô số kẻo không thành công!
Đoạn CSS dưới sẽ khiến cho việc sở hữu class .post-item .box-image. vì thế, bất cứ bài viết nào trong website mang ảnh đại diện nó đều áp dụng hiệu ứng này Các bạn nhé!
|
1
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
Cả nhà vào Giao diện – Tùy biến – Style – Custom CSS. Paste hầu hết đoạn CSS ở trên vào nhé!
Bước 3: Lưu lại và hưởng thành tựu
Cả nhà 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 Cả nhà sử dụng đoạn code CSS trên hiệu quả nhé!
Comments
Post a Comment