Thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS
Chào Cả nhà, bài viết trước Themewp.vn đã chỉ dẫn Cả nhà thêm hiệu ứng ánh sáng trượt khi 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ả nhà 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 & đề nghị
Bài viết hướng dẫn trên thực tại trong quá trình làm website. Tri thức có thể sẽ qúy báu mang đa dạng người, các cũng có thể ko 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, nếu như bạn cũng đang mang website đáp ứng gần như 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 óng ánh khi hover vào ảnh sản phẩm Woocommerce[/caption]
Tạo hiệu ứng ánh sáng óng ánh lúc hover vào ảnh sản phẩm Woocommerce
Bước 1: Copy CSS
Cả nhà copy hầu hết đ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 với 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 vận dụng hiệu ứng này Anh chị nhé!
|
một
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 tất cả đ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ự đổi thay nhé!
Lời kết
Cám ơn Anh chị đã để ý theo dõi . Chúc Các bạn dùng đoạn code CSS trên hiệu quả nhé!
Comments
Post a Comment