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