Thêm hiệu ứng ánh sáng lúc hover ảnh sản phẩm Woocommerce bằng CSS
Chào Anh chị em, bài viết trước Themewp.vn đã hướng dẫn Cả nhà thêm hiệu ứng ánh sáng trượt lúc hover vào ảnh bài viết trong theme Flatsome rồi phải không? Hôm tiếp tục hướng dẫn Anh chị thêm hiệu ứng ánh sáng đẹp khi hover ảnh sản phẩm Woocommerce nhé!
Thêm hiệu ứng ánh sáng lúc hover ảnh sản phẩm Woocommerce bằng CSS
Điều kiện & đề xuất
Bài viết chỉ dẫn trên thực tại trong quá trình làm cho website. Tri thức với thể sẽ qúy báu có nhiều người, những cũng với thể không lạ lẫm gì sở hữu một số bạn.
- Nền tảng: WordPress 5.1
- Theme: Flatsome
- Plugin sử dụng: Woocommerce
thành ra, giả dụ bạn cũng đang có website đáp ứng tất cả thông tin như vừa liệt kê thì cứ an tâm copy – paste theo hướng dẫn là sẽ thành công nhé!
[caption id="attachment_2596" align="alignnone" width="600"]
Tạo hiệu ứng ánh sáng óng ánh khi hover vào ảnh sản phẩm Woocommerce[/caption]
Tạo hiệu ứng ánh sáng óng ánh khi hover vào ảnh sản phẩm Woocommerce
Bước 1: Copy CSS
Anh chị em copy gần như đoạn code CSS dưới đây nhé! Đừng vô số kẻo ko thành công!
Đoạn CSS dưới sẽ khiến việc sở hữu class .product-small .box-image. bởi thế, bất cứ sản phẩm Woocommerce nào trong website với ảnh đại diện nó đều vận dụng hiệu ứng này Anh chị em 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ả nhà vào Giao diện – Tùy biến – Style – Custom CSS. Paste gần như đ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ết
Cám ơn Các bạn đã quan tâm theo dõi . Chúc Các bạn tiêu dùng đoạn code CSS trên hiệu quả nhé!
Comments
Post a Comment