Classic Elementor widget · Free
Grid Hover Posts for Elementor: A post grid where every hover changes the picture
Grid Hover Posts gives you Elementor hover posts without a template: your latest articles sit in columns over one large image, and when a reader hovers a post, its featured image fades in across the whole grid. It is an Elementor post grid hover effect with categories, meta, excerpt and Read More. Free, on Elementor Free.
- Image fills the grid on hover
- 1 to 6 columns per device
- Category, meta and excerpt
- No script, pure CSS
The short answer
What is Grid Hover Posts for Elementor?
Grid Hover Posts is a free Elementor widget from Animation Addons that shows your posts in a grid of columns over one shared image. The first post’s featured image fills the grid, and hovering any other post fades its image in, so readers get a preview of each article before they click.
Each post shows its category, title, meta such as author and date, and optionally an excerpt, a rating and a Read More link, in the order you set. As an Elementor posts hover effect it is pure CSS with a 0.5 second fade. At 1200 px wide and below, the widget gives every post its own image, so phones and tablets get image cards instead of a hover. It is a classic widget for the Elementor 3 editor that keeps working in Elementor 4, and a free Elementor hover posts addon. For three posts with the image above the title, use Banner Posts.
Also searched as: elementor hover posts, elementor hover posts widget, elementor post grid hover effect, elementor posts hover effect, elementor blog post hover effect, elementor featured image on hover, elementor post hover image change, elementor post hover animation, free elementor hover posts, elementor hover posts addon, how to add hover posts in elementor, elementor loop grid hover image, elementor hover posts not working, elementor grid hover posts.
Key factsGrid Hover Posts · Animation Addons for Elementor
- Plan
- Free
- Widget type
- Classic Elementor widget (V3), works in Elementor 4
- Works with
- Elementor Free and Elementor Pro
- Hover effect
- The hovered post’s image fades in over the whole grid in 0.5 s
- Columns
- 1 to 6 per device (3, 2 and 1 by default)
- Query
- Custom, Archive or Related, 3 posts by default
- Post details
- Category, title, excerpt, meta, rating and Read More, in any order
Live demos
Grid Hover Posts designs, live
Three post grids on small sites: a web agency journal, an interior design blog and a film studio. Move your pointer across the posts and watch the image change. On a phone, each post shows its own image, as the widget does.
Arolax®WorkJournalContact
Latest from the journal
Blog and news
Journal posts over one big image
A web agency journal with three posts side by side, no gaps and no lines. The first post’s picture fills the whole row at rest. Point at another post and its picture fades in across the row, an Elementor post hover image change with no script. The first three words of each title are bold.
Hover a postSet Columns to 3, Highlight Length to 3 in the Title section and Separator Between to // in the Meta section. In the Style tab, set Columns Gap to 0.
Maison FormeCollectionsJournalStores
The journal
Rooms, makers and materials
Warm Minimalism for Small City Flats
Three rules for calm rooms that still feel lived in.
Read more about Warm Minimalism for Small City FlatsRead More
Inside the New Lobby at Hotel Rive
Oak slats, low seats and light from one long window.
Read more about Inside the New Lobby at Hotel RiveRead More
The Making of a Curved Oak Staircase
Eleven weeks, one workshop and four hundred joints.
Read more about The Making of a Curved Oak StaircaseRead More
Five Pieces We Design Around Every Season
The stone bench and the round mirror come first.
Read more about Five Pieces We Design Around Every SeasonRead More
Magazines and interior blogs
Interior blog in four columns
Four columns with thin lines between them, a dark gradient on each post, a short excerpt under each title, the date, and Read More with an arrow after the text. The first two title words take the accent color, and so do titles on hover.
Hover a post or Read MoreSet Columns to 4 and switch on Show Excerpt. In the Read More section, set Icon Position to After. The gradient is the Background in Style, under Layout.
Sahara FilmsFilmsStoriesStudio
Stories from the set
Rated by our viewers
Studios and portfolios
Film stories in two columns with ratings
Two columns and two rows over one image, with every item centered. Each post shows its reader rating above the category, and the meta shows the date and the comment count with a /// separator.
Hover a postSet Columns to 2 and switch on Show Rating. Choose Date and Comments in Meta Data, and set Alignment to Center in the Style tab under Layout.
Features
Key features of Grid Hover Posts
The benefits listed on the original page, each with the real setting behind it.
Hover image reveal
Hovering a post fades its featured image in across the whole grid, under a soft dark overlay. It is an Elementor blog post hover effect and an Elementor featured image on hover effect in one, so readers preview each article before they click.
Smooth post hover animation
The image change is a 0.5 second fade made with CSS alone. No script loads, so this Elementor post hover animation stays light and quick.
Columns for every screen
Use it as Elementor grid hover posts with Columns from 1 to 6 per device. Set the number of posts with Posts Per Page, and add Columns Gap and Rows Gap if you want space.
Dynamic post query
Show your latest posts, the current archive or related posts with Query Type, and filter by term, author, post format, date and order.
Content over the image
Turn on Show Taxonomy, Show Meta, Show Excerpt, Show Rating and Read More, then drag them into your order in Layout Normal.
Highlighted titles
The first words of each title get their own style: set Highlight Length, then the highlight color and weight in Style → Title.
Mobile friendly
At 1200 px and below, every post shows its own image, so touch screens get clear image cards without needing a hover.
Step by step
How to add hover posts in Elementor
Five steps, no code. The bold names are the labels in the Elementor panel.
Install and activate Animation Addons for Elementor, then turn on Grid Hover Posts in Animation Addons → Elements.
Open your page in Elementor, search the panel for Grid Hover Posts and drag it into a full-width section.
In Query, choose the Query Type and filters. In Settings, set Columns and Posts Per Page.
Turn on the parts you want with Show Taxonomy, Show Excerpt, Show Meta and Read More, and sort them in Layout Normal.
In Style → Layout, set the gaps and the Padding that gives each post its height, style the title and meta, then publish.
Try it free Free on WordPress.org · Works with Elementor Free
Honest comparison
Grid Hover Posts vs Banner Posts
Two free post widgets from Animation Addons. Grid Hover Posts puts the posts over one changing image; Banner Posts shows three posts with the image above each title.
| Feature | Grid Hover Posts | Banner Posts |
|---|---|---|
| Layout | A grid of 1 to 6 columns | Three posts in one row |
| Number of posts | Posts Per Page, 3 by default | Always three |
| Choose the posts | Custom, Archive or Related query, include or exclude by term or author | Recent Post, or pick from your latest 50 |
| Image fills the whole grid on hover | Yes | No |
| Category badge | Yes | No |
| Excerpt and reader rating | Yes | No |
| Play icon and popup for video, audio and gallery posts | No | Yes |
Compared from the Animation Addons for Elementor widget settings, October 2026.
FAQ
Questions about Grid Hover Posts
How do I add hover posts in Elementor?
Install the free Animation Addons plugin, turn on Grid Hover Posts and drag it onto your page. Pick the posts in Query and the number of Columns, and the hover effect works at once.
What happens when a reader hovers a post?
The featured image of that post fades in over the whole grid in half a second. When the pointer leaves, the first post’s image shows again.
Does the hover effect work on phones?
Phones have no hover, so at 1200 px and below the widget shows each post with its own image behind it, like a card. Nothing is hidden.
Can I show an excerpt and Read More?
Yes. Turn on Show Excerpt and set the Excerpt Length, and turn on Read More with your own text and an icon before or after it.
How many columns and posts can it show?
From 1 to 6 columns, set per device, and as many posts as you set in Posts Per Page. Extra posts wrap to new rows over the same image.
Can I choose which posts appear?
Yes. Include or exclude posts by term or author, filter by post format, category, tag and date, and set the order. Archive and Related query types are there too.
Is there a free Elementor hover posts widget?
Yes. Grid Hover Posts is part of the free Animation Addons for Elementor plugin on WordPress.org and works with Elementor Free. It has no Pro-only settings.
Can it replace an Elementor Loop Grid?
For an Elementor loop grid hover image, yes: this widget fades the hovered post’s featured image across the grid without a template. Elementor’s Loop Grid needs Elementor Pro and a loop item template.
Why are my Elementor hover posts not working?
Below 1200 px there is no hover, because each post shows its own image. On desktop, check that your posts have featured images and that Query and Posts Per Page return the posts you expect.
Does it work in Elementor 4?
Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it works on the same page as atomic elements.
Pairs well with
Related Elementor widgets
Widgets the original page listed next to Grid Hover Posts. See all 102 widgets.
Animation Addons Pro · Elementor 4
Let readers preview on hover
A free post grid hover effect for Elementor, with columns, query, meta and excerpt.
Halloween deal40% off every Pro planEnds 5 Nov
- 15-day money-back guarantee
- Rated 4.6 / 5 on WordPress.org
- No Elementor Pro needed
- Elementor 3 & 4 in one license