There are multiple ways to show a post thumbnail on hover. For that, you need to add Elementor post widget to your page or post archive. In this article, we are going to show you how to hide the post thumbnail and display it when someone hovers over the post item. We can do it with a few lines of CSS. We can do that with simple 3 steps.
Step 01.
Once you have added the post widget to the page, navigate to the advanced tab and add a CSS class to the post widget.
Step 02.
First, we need to hide the post thumbnail. For that, navigate to the advanced tab in the post widget and go to custom CSS and add the following code.
.my-css-class .elementor-post__thumbnail{
display: none;
}
Step 03.
Now, we can add the CSS to display the thumbnail image when hovering over the post item.
.my-css-class .elementor-grid-item:hover .elementor-post__thumbnail{
display: block;
}
This is just to give an idea for beginners to show how it works, There are ways to achieve the same with more complex designs and layouts.
.my-css-class .elementor-post__thumbnail{
display: none;
}
.my-css-class .elementor-grid-item:hover .elementor-post__thumbnail{
display: block;
}
This clip is another example of how you can customize and use the above mentioned code.
