Search
Close this search box.

How to Add Hover Effect to the Post Thumbnail Only in Elementor

In WordPress, the post thumbnail (featured image) is an inseparable feature that you can input images as thumbnails. The post thumbnail should depict the post itself, so the users will quickly identify the post.

Well, good news for you if you’re an Elementor user. With Elementor, you can customize the post thumbnail by adding a hover effect to it, so your post thumbnail will look stunning. This article will show you how to add a hover effect to the post thumbnail only in Elementor.

How to Add Hover Effect to the Post Thumbnail Only in Elementor

As you can see from the title of this article, we’re focusing on hovering over the post thumbnail only. So, if you want to learn how to add a hover effect to your post items individually, you can visit our other article by clicking here.

Alright, we will start the tutorial.

Go to your Elementor editor, and we will start everything from scratch, so create a section with a single column. Afterward, please 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.

Once you’ve edited and styled the Posts widget, next, we will add a hover effect only to the post thumbnail 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__thumbnail:hover{
     transition: all .70s ease-in-out;
    transform: scale(1.07);
    cursor: pointer;
    z-index: 1;
}

The Code Explanation:

The code above selects the post thumbnail on the Posts widget using the selector .elementor-post__thumbnail, and then the hover effect applies by adding the pseudo-selector :hover. You can check the complete list of Elementor widget selectors here.

The style of the post thumbnail hover is defined between the curly brackets (Properties and Values). Such as setting the transition’s type to all with speed at the 70s ease-in-out (slow in, slow out). And other properties and values.

If you are happy with the style of post thumbnail hover (as in the GIF above), you can keep it like this, and don’t forget to save or publish your project if you want to. But if you want to customize it, you can edit the values on the CSS snippet.

Note: Scale transform/zoom-in is a common and popular hovering effect style 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 how easily you can add a hover effect only to the post thumbnail in Elementor—using Elementor Custom CSS. The hover effect style we used here is the transform/ 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 our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.