Adding a Light Effect to Post Images on Hover in Flatsome WordPress Theme

Hello everyone, in the previous post I showed you how to add a sliding light effect when hovering over post images in the Flatsome theme, right? Today, I’ll continue by showing you how to add a beautiful light effect when hovering over WooCommerce product images!

Requirements & Conditions

This tutorial is based on my real-world website development experience. The knowledge may be valuable for many people, but for some advanced users it might be quite familiar. So if you’re experienced and notice anything incorrect, feel free to share your feedback!

The demo site where I tested this code has the following setup:

• Platform: WordPress 5.1
• Theme: Flatsome
• Plugin: WooCommerce

So if your website matches these conditions, you can confidently copy and paste the code below and it should work perfectly.

If you run into any issues, feel free to leave a comment and I’ll help you troubleshoot!

Create a Shiny Light Effect on WooCommerce Product Images

Step 1: Copy the CSS

Copy the entire CSS code below. Don’t miss anything or it may not work!

This CSS works with the class .product-small .box-image, so any WooCommerce product with a featured image will have this effect applied.

.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 the CSS

Go to:
Appearance → Customize → Style → Custom CSS

Then paste the CSS code above into that section.

Step 3: Save and Check the Result

Click Save, then go to your homepage or product archive page to see the effect.

Conclusion

Thank you for following and supporting GiuseArt. Hope you can use this CSS code effectively! If you have any questions or run into issues, feel free to leave a comment.