The post title is an essential part of your blog posts. No matter how good the content you have created, it will be useless if your users’ attention is not directed to your content. So, it would help if you captured the attention of as many users as possible. Nailing the blog post title is one of the ways to get users’ eyes on your blog posts. Adding a hover effect to the post title is one of the best options we recommend.
This article will show you how to add a hover effect to the post title in Elementor Posts widget.
Steps to Add Hover Effect to Post Title in Elementor Posts Widget
Before starting the tutorial, please upgrade your Elementor to the Elementor Pro version. Because the Elementor Posts widget is only accessible on the pro version.
Step 1: Add the Elementor Posts Widget
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.
Step 2: Add the CSS Snippet
Once you’ve edited and styled the Posts widget, next, we will add a hover effect to the title of the posts 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__title{
display: inline;
}
selector .elementor-post__title:hover{
text-decoration: none;
box-shadow: inset 0 -.2em 0 #bad930;
color: inherit;
}
The Code Explanation:
The code above selects the titles on the Post widget using the selector .elementor-post__title , and then the hover effect applies by adding the pseudo-selector :hover .You can check the complete list of Elementor widget selectors here.
The post title style is defined between the curly brackets (properties and values). We set the post title display to inline by adding the property display and the value inline , this means there will be no effect on the hover state’s height and width properties. We also add other properties, such as text-decoration, box-shadow, and color. You can edit the values for each property; for example, if you want to change the color of the box shadow, replace the hex color code (see the image below).
That’s it. Don’t forget to save or publish your project if you want to.
The Bottom Line
With Elementor Custom CSS, you can add CSS to every section, column, or widget, so you can easily add a hover effect to the post title in Elementor Posts widget.
As we mentioned at the beginning of this article, a post title is an essential part of your blog post, so please spend more time working on your post title; adding a hover effect is highly recommended.
