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