How to Add Hover Effect to Individual Post Items in Elementor Posts Widget

Updated: November 7, 2022

If you are a WordPress user using Elementor to build your website, you must be familiar with the hover effect feature. You can find that feature mostly in every Elementor widget setting. The hover effect can make your element/s look attractive, so it’s an effective way to enhance user experience on your site.

Well, talking about the hover effect, this article will show you how to add a hover effect to individual post items in the Elementor Posts widget using Elementor custom CSS, more specifically, the zoom-in hover effect.

Hover Effect Individually on Post Item in Elementor Posts Widget (GIF)

There are two reasons why we make this tutorial for you:

  • By default, you can add a hover effect to an individual post to the Elementor posts widget. But, the hover effect is very basic/standard (see the GIF).
  • By default, Elementor allows you to add a zoom-in hover effect to the Posts widget (Advanced tab -> Transform -> Scale). But the hover effect will impact entire post items (not individual). See the GIF below for an example.

Steps to Add Hover Effect to Individual Post Items in Elementor Posts Widget

Before we start the tutorial, we want to inform you that this tutorial will work with Elementor custom CSS. The custom CSS feature is only available on Elementor Pro; ensure you’ve upgraded to the pro version.

Step 1: Add an Elementor Posts widget

Go to your Elementor editor, and we will start everything from scratch, so create a section with a single column. Afterward, select the Posts widget from the widget panel and then drag and drop it into the canvas area. Once you’ve added the Posts widget, you can edit and style up the widget to your preference.

Note: Please ensure you’ve already posted some posts on your site.

Step 2: Add the CSS Snippet

Once you’ve edited and styled the Posts widget, next, we will add a hover effect in an individual post by adding the simple CSS snippet. On the Posts widget settings, go to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then paste it into the Custom CSS field.

selector .elementor-post:hover{
     transition: all .50s ease-in-out;
    transform: scale(1.1);
    cursor: pointer;
    z-index: 1;
}

The code above will select the individual post item on the Posts widget using the selector .elementor-post and apply the CSS transform. You can check the complete list of Elementor Elementor widget selectors here.

If you’re happy with the hover effect that has been used ( as in the GIF above), you can keep it like this and save your project if you want to. But, if you want to customize it, such as the transition speed and the transform scale value, you can edit the value in the CSS snippet.

Note: Scale transform/ zoom-in is a common and popular hovering effect used on websites. If you want to know more about others’ hovering effect transform methods, you can visit this page.

The Bottom Line

This article shows you how easy to add a hover effect to individual post items in the Elementor posts widget using Elementor custom CSS. The technique we use for this effect is (zoom-in) which involves 2D, and some pseudo-element transforms. Customize and play around with all the hover effect styles until you find the best hover effect for your site.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.