Want to learn how to add a hover effect to items in the posts widgetElementor?
If you are a WordPress user using Elementor to create your Website, you should be familiar with the hover effect feature. You can find this feature mainly in each widget setting Elementor.
The hover effect can make your elements attractive, so it is an effective way to improve the user experience on your website.
Well, speaking of the hover effect, this article will show you how to add the latter to individual post elements in the widget Elementor Posts using Elementor's custom CSS, specifically, the zoom-in hover effect.
There are two reasons why we are making this tutorial for you:
- By default, you can add a hover effect to a post from the Elementor posts widget. But, the hover effect will be very basic/standard.
- By default, Elementor allows you to add a zipper effect to the Posts widget (tab Advanced -> Transform -> ladder). But the hover effect will impact all (not individual) posts widget elements.
Steps to add hover effect to individual posts from Elementor's posts widget
Before starting the tutorial, we want to let you know that this tutorial uses Elementor's Custom CSS feature. This feature is only available on Elementor Pro; make sure you have upgraded your version.
Step 1: Add Posts Widget
Go to your Elementor editor and we'll start everything from scratch, so create a section with a single column.
Read also: How to integrate MailChimp with Elementor
Next, select the Posts widget from the widget panel, then drag and drop it into the editing area. Once you have added the Posts widget, you can edit and style the widget according to your preferences.
Please note:: Please make sure you have already published articles on your website.
Step 2: Add the CSS snippet
Once you've edited and styled the Posts widget, next we'll add a hover effect within an individual post by adding the simple CSS snippet. In the Posts widget settings, go to Tab Advanced -> Custom CSS. Please copy the CSS snippet below and then paste it into the field Custom CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
The above code will select the individual post element on the Posts widget using the selector .élémentor-post and apply the CSS transform.
If you are happy with the hover effect that was used, you can keep it that way and save your project if you wish. But, if you want to customize the transition speed and transformation scale value, you can change the value in the CSS snippet.
Please note:: Transform/zoom in is a common and popular effect used on websites. If you want to know more about other methods of transforming hover effects, you can visit this page.
Discover also: all Elementor widget selectors in the following article
Get Elementor Pro Now!!!
Conclusion
This article shows you how easy it is to add a hover effect to individual post elements in Elementor's posts widget using custom CSS.
The technique we used for this effect is ( zoom-in ) which involves 2D and some pseudo transformed elements. Customize and play with all styles of hover effects until you find the best hover effect for your website.
Here is! We have just introduced you to the best tools for marketing via email for Elementor. If you have any concerns about how to use them let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
