Free Digital Courses 1 min a Day

Designed for learners of all ages. Easy to understand. Deaf-friendly.

Start upgrading your skills today!



[WooCommerce Store] How to create Hover Effects on Elementor Editor


You may have seen some eCommerce websites that have great hover effects. For example, if you hover your mouse over an image, it will show you another angle of that image. You may use hover effects when you display some product images on your homepage.

In Elementor Editor, it is easiest to use hover effects on background images. If you like to create 4 columns of product images with hover effects, try this:

  1. Create a Section and use the + icon to create 4 columns
  2. Right click on the first column and click on Style to add background image. If you can’t find the Image upload icon, simply click on the paint icon that says “Classic” under “Background Type”.
  3. Then, select the “Hover” Section, and click on “Classic” to add Background image for Hover.
  4. Repeat for the rest of the columns with different products images.
  5. You now get 4 columns of images that have the hover effect.

Note that the “Transition Duration” function only applies for Colour Change on hover and not Image Change. For image change, it will be a standard swift transition, so this setting doesn’t work for image change.

Hope this helps, have fun! 🙂

Leave a Reply

Your email address will not be published.



Click one of our representatives below to chat on WhatsApp or send us an email to [email protected]

× How can I help you?