Phong thuỷ
Thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS
24
Th11
Th11
Bước 1: Copy CSS
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 .product-small .box-image. Do đó, bất cứ sản phẩm Woocommerce nào trong website có ả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 | .product–small .box–image:hover::before{ –webkit–animation:shine .75s;animation:shine .75s } @–webkit–keyframes shine{ 100%{left:125%} } @keyframes shine{ 100%{left:125%} } .product–small .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á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é!
