A custom layout is easiest to build when you know its structure first: which box holds which element.
This guide builds a product card with the Hover Card widget in The Plus Addons for Elementor: an image, a title, a price and a button inside one card that grows slightly when the pointer is over it.
To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — Hover Card is part of the free The Plus Addons for Elementor plugin. It works the same with the Pro plugin installed.
- Widget to enable: Hover Card, switched on under The Plus Addons > Widgets.
- Deprecated: the editor shows “The Hover Card widget has been deprecated since The Plus Addons for Elementor 6.5.0. Note that Hover Card will be completely removed once The Plus Addons for Elementor 6.6.0 is released.” No replacement widget is named, so avoid it for new pages.
- Skills: you build the HTML structure yourself, row by row, so basic HTML and CSS knowledge helps.
How to Create a Custom Layout
- Add the Hover Card widget and create six rows with + Add Item, set up like this:
| Row | Open Tag / Enter Class | Close Tag | Content |
|---|---|---|---|
| 1 Card | Div / product-card | None | None |
| 2 Image | Div / product-image | Default | Image |
| 3 Title | H3 / product-title | Default | Text: product name |
| 4 Price | p / product-price | Default | Text: price |
| 5 Button | a / product-button, with a Link | Default | Text: Shop now |
| 6 Close the card | None | Div | None |
- On rows 1 to 4, set Style > Display to Block. The default Initial keeps every tag inline, so the title and price would share a line and the card would ignore its width.
- On row 1, switch on Width/Height Options and set Width (for example 320 px), then add Padding.
- Still on row 1, switch on Background Style > Background. On the Normal tab set a white background, a Border Radius and a Box Shadow.
- Open the Hover tab and type scale(1.05) in Transform css. Style the text and button rows under Text Style and Background Style, then publish.
The card at rest and while hovered:
Building a layout from rows, in motion:
How It Behaves
- The card grows over 0.3 seconds and shrinks back when the pointer leaves. Add Transition css on the Normal tab, for example all 1s linear, to change the speed in both directions.
- A Transform css value on the Normal tab is applied all the time, not only on hover.
- Rows can also be placed freely: set Position to Absolute on a badge row inside the card and use the Top and Right offsets. The card row keeps the default Relative position, so the badge is placed inside it.
Limitations
- Width, Height and offsets have no visible effect while Display is Initial.
- The product image gets no alt text.
- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released.
Troubleshooting
The card is already bigger before I hover
The Transform css value is on the Normal tab. Move it to the Hover tab.
The title and price are on one line
Set Display to Block on those rows.
