Rollover Overlays for Post Card Images
A Rollover is a saved layout from the Avada Library that appears as an overlay when a visitor hovers over a Post Card’s image — for example, a product thumbnail in a shop grid, a portfolio image, or a blog post card. Instead of a plain static image, hovering reveals a custom-designed panel with whatever content you’ve added: an “Add to Cart” button and price, a “View Project” call to action, icons, extra text, and so on.
Because a Rollover is built the same way as any other saved layout — using the regular builder canvas with containers, columns, and elements — you design it once and can reuse it across every Post Card that needs the same hover effect.
Creating a Rollover
Go to Avada → Library in the WordPress admin menu.
Click Add New.
Under Select type, choose Rollover.
Under Assign a name, give it a descriptive name (e.g. “Product Add to Cart Overlay”).
Click Create. This opens the layout straight into the builder, where you design the overlay’s content like you would any other saved layout — add a container, columns, and whatever elements you want visitors to see on hover (buttons, text, icons, ratings, etc.).
Save/publish the layout when you’re done.
Your saved Rollovers appear in the Library list with Rollover shown in the Type column, and you can filter the list down to just your Rollovers using the Type filter.
Selecting a Rollover on a Post Card Image
To use a Rollover, it needs to be attached to a Post Card’s Post Card Image element:
Edit the Post Card (or the page containing your Post Cards element) in the builder and select the Post Card Image element’s options.
Under the Layout setting, choose Rollover (the other options are Static, Crossfade, and Swap).
A new Rollover Layout dropdown appears. Select the Rollover you created — the list shows every published Rollover in your Library, plus a None option.
Use the Edit Rollover Layout button next to the dropdown to jump straight into editing the selected Rollover’s content without leaving the Post Card.
If Rollover Layout is left on None, the image behaves like a normal static image with no hover overlay, even though Layout is set to Rollover.
Direction, Speed, and Easing
Once a Rollover is selected, three additional settings control how the overlay animates in:
| Setting |
What it does |
| Rollover Direction |
Controls the direction the overlay enters from: Fade, Left, Right, Top, Bottom, Center Horizontal, or Center Vertical. |
| Rollover Speed |
The transition duration, in seconds (default 0.3). |
| Rollover Easing |
The animation easing curve: Ease, Ease In, Ease Out, Ease In Out, or Linear. |
Things to Know
A Rollover’s content is completely up to you — it’s a normal builder canvas, so anything you can build elsewhere (buttons, icons, text, ratings, dynamic data) can go inside a Rollover.
Selecting Link Image is independent of the Rollover setting — a Rollover does not require the image itself to be a link. If you want the overlay’s own buttons or links to be the only clickable elements, set Link Image to No.
Changes to Layout, Rollover Layout, Direction, Speed, and Easing all preview live in the builder, so you can fine-tune the hover effect without needing to save and reload the page.
The same Rollover can be reused across multiple Post Cards — edit it once in the Library and every Post Card using it picks up the change.
