";var nuttaibut = "<\/i> T\u1ea3i th\u00eam<\/span>"; Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome Trang chủGiới thiệuBlogPhần mềmThủ thuậtTiện íchRút gọn liên kếtVòng quay may mắnLiên hệ HomePhần mềmThêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome Nguyễn Văn Luyến 5 năm trướcThêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome Mục lụcChào các bạn, nếu ai để ý có thể thấy các mẫu website gần đây của Ninh Bình Web mình hay sử dụng hiệu ứng ánh sáng trượt lấp lánh khi rê chuột vào ảnh bài viết. Có một số bạn thích hiệu ứng CSS đó và muốn mình chỉ cách làm. Do đó, hôm nay mình viết hướng dẫn cho các bạn khác có thể làm theo luôn!Demo: //bds7.ninhbinhweb.infoĐiều kiện & yêu cầuBài viết này mình chỉ cho các bạn mới học làm website WordPress, với mục đích làm sao chỉ cần copy – paste là có thể làm được (đôi khi không cần hiểu). Do đó, lưu ý giúp mình một số điều sau!Nền tảng: WordPress (khuyến khích WP 5 trở lên)Theme FlatsomeDemo mình làm website sử dụng theme Flatsome nên bạn nào đang có theme Flatsome thì cứ an tâm hoàn toàn, chỉ cần copy – paste theo đúng như hướng dẫn của mình là OK. Những bạn khác không sử dụng theme Flatsome thì có thể liên hệ mình support riêng nhé!Tạo hiệu ứng ánh sáng lấp lánh khi hover vào ảnh bài viếtBước 1: Copy CSSCác bạn copy toàn bộ đoạn code CSS dưới đây nhé! Đừng thiếu gì kẻo không thành công!Đoạn CSS dưới sẽ làm việc với class .post-item .box-image. Do đó, bất cứ bài viết nào trong website có ảnh đại diện nó đều áp dụng hiệu ứng này các bạn 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) }12345678910111213141516171819202122.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 CSSCác bạn vào Giao diện – Tùy biến – Style – Custom CSS. Paste toàn bộ đoạn CSS ở trên vào nhé!Bước 3: Lưu lại và hưởng thành quả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ự thay đổi nhé!Lời kếtCám ơn các bạn đã quan tâm theo dõi và ủng hộ GiuseArt. Chúc các bạn sử dụng đoạn code CSS trên hiệu quả nhé! Có thắc mắc hoặc lỗi chỗ nào cũng vui lòng comment cho mình biết nữaThông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện WordPress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebook và zalo chính thức.Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!CSS căn bảnflatsomehọc CSS10 lượt xem | 0 bình luận Nguyễn Văn LuyếnLuôn luôn lắng nghe, lâu lâu mới hiểu Đề xuất cho bạnHướng dẫn sử dụng công cụ ký số văn bản theo Nghị định 30/2020/NĐ-CP 5 ngày trướcPhần mềm Winamp phần mềm phát nhạc một thời đã “hồi sinh” 1 tuần trướcPhần mềm chụp màn hình và ghi chú nhanh Snap IT 5 tháng trướcvnTools – Công cụ hỗ trợ chuyển chữ hoa, chữ thường, đọc số thành số…. 6 tháng trướcQuy định mới về đào tạo lái xe hạng B1, B2, C áp dụng từ ngày 1.6.2024 6 tháng trướcỨng dụng Mô phỏng 120 tình huống giao thông trên điện thoại V2.0.0 9 tháng trướcBộ cài đặt phần mềm ÔN TẬP MÔ PHỎNG phiên bản V2.0.0 9 tháng trướcHướng dẫn cập nhật phần mềm ÔN TẬP MÔ PHỎNG từ phiên bản v1.2.2 lên v1.2.3 11 tháng trước ✕ Hủy ĐăngBiểu tượng cảm xúc✕Xác nhận thông tin của bạn Xác nhận thông tin Phần mềm quản lý bán hàng đa kênh chuyên nghiệp nhất Download Adobe Photoshop Lightroom Classic 2021 mới nhất Full Crack Big Sur Cursors For Windows – Thay Đổi Layout Con Trỏ Chuột Cho Windows Theo Phong Cách Big Sur macOS Bình luận gần đâyAddin Word xuất Mail Merge có chức năng cắt ra…Nguyễn Văn Luyến 4 tháng trướcƯng dụng này rất hay cho người hay thực hiện các biểu mâu, thư mời,...Quy định mới về đào tạo lái xe hạng B1,…Nguyễn Văn Luyến 5 tháng trướcChuẩn bị lại lên giáTiện ích tiếng Việt trên Word năm 2022 miễn phíChuyển Đổi Số 10 tháng trướcCó trang nguồn mình tải á, bạn qua trang đó xem thử. Mình cài được bình thường áFont chữ thư pháp FZ Tiểu Tự Việt HoáChuyển Đổi Số 10 tháng trướcMỉnh cũng thấy cái gì hay hay lưu lại trên trang cá nhân khi nào cần lấy ra dùng thôi à. Cảm ơn bạn nhiều!Font chữ thư pháp FZ Tiểu Tự Việt Hoáquang tuấn 10 tháng trướcok cám ơn addTiện ích tiếng Việt trên Word năm 2022 miễn phíĐàm kiên 1 năm trướcsao không thấy hướng dẫn khắc phục lỗi the macro vậyTiện ích tiếng Việt trên Word năm 2022 miễn phíĐàm kiên 1 năm trướcfile tải về chỉ có 3 file hướng dẫn chứ không có file cài đặt nhéGoogle tung dấu tick xanh trong GmailNguyễn Văn Luyến 1 năm trướcBài viết hay Có nhiều lượt xemNewspaper v9.0 Premium WordPress Themes1375 lượt xemTiện ích tiếng Việt trên Word năm 2022 miễn phí975 lượt xemBộ cài đặt phần mềm ÔN TẬP MÔ PHỎNG phiên bản V2.0.0961 lượt xemAddin Word xuất Mail Merge có chức năng cắt ra nhiều file và gửi mail690 lượt xemQuy định mới về đào tạo lái xe hạng B1, B2, C áp dụng từ ngày 1.6.2024617 lượt xem×ZaloMessengerEmailZaloMessengerEmail Trang chủ Zalo Hỗ trợ Messenger Liên hệ Đồng ý Cookie Trang web này sử dụng Cookie để nâng cao trải nghiệm duyệt web của bạn và cung cấp các đề xuất được cá nhân hóa. Bằng cách chấp nhận để sử dụng trang web của chúng tôi Tôi chấp nhận
Demo: //bds7.ninhbinhweb.info
Demo mình làm website sử dụng theme Flatsome nên bạn nào đang có theme Flatsome thì cứ an tâm hoàn toàn, chỉ cần copy – paste theo đúng như hướng dẫn của mình là OK. Những bạn khác không sử dụng theme Flatsome thì có thể liên hệ mình support riêng nhé!
Các bạn copy toàn bộ đoạn code CSS dưới đây nhé! Đừng thiếu gì kẻo không thành công!
Đoạn CSS dưới sẽ làm việc với class .post-item .box-image. Do đó, bất cứ bài viết nào trong website có ảnh đại diện nó đều áp dụng hiệu ứng này các bạn 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) }
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{
.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)
Các bạn vào Giao diện – Tùy biến – Style – Custom CSS. Paste toàn bộ đoạn CSS ở trên vào nhé!
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ự thay đổi nhé!
Cám ơn các bạn đã quan tâm theo dõi và ủng hộ GiuseArt. Chúc các bạn sử dụng đoạn code CSS trên hiệu quả nhé! Có thắc mắc hoặc lỗi chỗ nào cũng vui lòng comment cho mình biết nữa
Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện WordPress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebook và zalo chính thức.
Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!