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.