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

Hello everyone, if you’ve noticed, you might see that in recent website templates from Ninh Binh Web, I often use a shiny sliding light effect when hovering over post images. Some of you like this CSS effect and asked me how to create it. So today, I’m writing a guide so everyone can follow along!

Requirements & Conditions

This article is intended for beginners learning to build WordPress websites, with the goal that you can simply copy and paste to make it work (even without fully understanding it). So please note the following:

• Platform: WordPress (recommended version 5 or higher)
• Theme: Flatsome

My demo website uses the Flatsome theme, so if you’re using Flatsome, you can rest assured—just copy and paste exactly as instructed and it will work. If you’re using a different theme, feel free to contact me for separate support!

Create a Shiny Light Effect on Image Hover

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 .post-item .box-image, so any post with a featured image on your website will have this effect applied.

.post-item .box-image:hover::before{
  -webkit-animation:shine .75s;
  animation:shine .75s
}
@-webkit-keyframes shine{
  100%{left:125%}
}
@keyframes shine{
  100%{left:125%}
}
.post-item .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 entire CSS code above into that section.

Step 3: Save and Enjoy the Result

Click Save, then go to your homepage or post archive page to see the effect in action.

Conclusion

Thank you for following and supporting Ninh Binh Web. Hope you can use this CSS effect effectively! If you have any questions or encounter any issues, feel free to leave a comment.