Blogs
Add hover light effect to product image using CSS
Nov
Hi everyone, in the previous article, I showed you how to add a sliding light effect when hovering over an article image in the Flatsome theme, right? Today, I will continue to show you how to add a beautiful light effect when hovering over a Woocommerce product image!
Demo:
Conditions & requirements
The article is based on actual instructions during the process of making my website. The knowledge may be valuable to many people, but it may not be strange to some of you. Therefore, if there are any mistakes, please let me know!
The demo page to implement the code I have instructed has the following parameters:
- Platform: WordPress 5.1
- Theme: Flatsome
- Plugin user: Woocommerce
Therefore, if you also have a website that meets all the information as I just listed, then feel free to copy and paste according to the instructions and it will be successful!
If you can’t do it or encounter errors, please comment so I can find a solution together!
Create a sparkling light effect when hovering over Woocommerce product images
Step 1: Copy CSS
Copy the entire CSS code below! Don’t miss anything or it won’t work!
The CSS below will work with the class .product-small .box-image. Therefore, any Woocommerce product on the website that has a representative image will apply this effect!
|
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)
}
|
Step 2: Paste CSS
Go to Appearance – Customize – Style – Custom CSS. Paste the entire CSS above!
Step 3: Save and enjoy the results
Save the operation and go to the home page or article archive page to see the change!
Conclusion
Thank you for your interest in following and supporting themewpshop.com. Hope you can use the above CSS code effectively! If you have any questions or errors, please comment and let me know.
