The Hover Card widget from The Plus Addons for Elementor lets you build your own HTML layout in Elementor, one tag at a time, and style each part for its normal and hover state.
Each row of the widget opens a tag, adds content, and closes a tag. Put rows in the right order and you get a card, a badge or any small layout, with hover effects that react to the element itself or to a parent element.
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.
Watch the Video
How to Activate the Hover Card Widget
- Go to The Plus Addons > Widgets, search for Hover Card and switch it on.
How the Widget Works
Add the Hover Card widget and open Content > Hover Card. The deprecation notice sits at the top. Below it, Content [ Start Tag — End Tag ] holds the rows; a new widget has none. Click + Add Item for each row. Every row title shows its content type, open tag and close tag, for example none [ div — none ].
The rows are printed in order, so a tag that one row leaves open wraps every row after it until another row closes it. Six rows build this product card: the card box, the image, the title, the price, the button and a row that closes the card.
Open and Close Tags
Each row has an Open tab and a Close tab.
| Setting | What it does | Default |
|---|---|---|
| Open Tag | The tag this row opens: Div, Span, H1-H6, p, a or None. None opens no tag. | Div |
| Link | The URL of the tag. Only shown for the a tag. Open in new window adds target="_blank" and Add nofollow adds rel="nofollow". | Empty (no href) |
| Enter Class | One or more CSS classes for the tag, without a dot, separated by spaces. Hidden when Open Tag is None. | Empty |
| Close Tag | Default closes the tag this row opened. Div, Span, H1-H6, p or a closes that tag, so a row can close a tag an earlier row opened. None leaves the tag open for the next rows. | Default |
Setting the open and close tags, in motion:
Content Types
| Content | What it adds |
|---|---|
| None | Nothing. Use it for rows that only open or close a tag. |
| Text | The Text field (default "The Plus"). Basic HTML such as bold and italic is kept; script tags are removed. |
| Image | A Media image, shown as an image or, with Image As set to Background, as a background. |
| HTML | Rich content from the HTML Content editor: headings, paragraphs, links, lists and images. |
| Style | Your own CSS in Custom Style. Only printed for logged-in administrators (see Limitations). |
| Script | Your own JavaScript in Custom Script. Only printed for logged-in administrators (see Limitations). |
Style
The Style settings style the tag the row opens. They are hidden when Open Tag is None.
| Setting | What it does | Default |
|---|---|---|
| Position | Relative or Absolute. With Absolute, the Top, Bottom, Left and Right (Auto / PX) switches each reveal an offset in px (-300 to 300) or %. | Relative |
| Display | Block, Inline Block, Flex, Inline Flex, Initial or Inherit. Initial makes every tag, even a Div, an inline element, so set Block (or another value) for boxes that need a size. | Initial |
| Flex Direction | Column, Column Reverse, Row or Unset. Only with Flex or Inline Flex. | Unset |
| Alignment CSS Options | Switch that reveals Text Align, plus Align Items, Justify Content and Vertical Align with Flex or Inline Flex. | Off |
| Margin / Padding | Space around and inside the tag, per device. | Empty |
| Width/Height Options | Switch that reveals Width, Min. Width, Height and Min. Height (px, % or vh), per device. | Off |
| Z-Index | Stacking order, per device. | Empty |
| Overflow | Hidden or Visible. | Visible |
| Visibility | Unset, Hidden or Visible. | Unset |
Background Style
Switch on Background to get a Normal and a Hover tab for the tag.
- Normal: Background Type, Border Type, Border Radius, Box Shadow, Transition css, Transform css, CSS Filters and Opacity. These apply all the time, so a Transform css value here changes the element before anyone hovers.
- Hover: the same settings, applied while the pointer is over the element. Put hover-only effects such as scale(1.05) in this tab.
- Custom Hover (Hover tab): changes the element when the pointer is over a parent element instead. Type the parent’s class with a dot in Enter Class, for example .product-card. It has its own Background, Border, Box Shadow, Transition css, Transform css, CSS Filter and Opacity settings.
Text Style and Image Style
- Text Style (Content Text): Typography, plus Color and Text Shadow on the Normal and Hover tabs. It styles the tag the row opens, so it has no effect when Open Tag is None.
- Image Style (Content Image): Width, Max. Width, and Border, Border Radius, Box Shadow, Opacity and CSS Filters for Normal and Hover. These also style the tag around the image, not the image itself.
- Both have a Custom Hover switch with an Enter Class field (see Limitations).
How It Behaves
- Every change animates: the widget gives all its elements a 0.3 second linear transition. A Transition css value on the Normal tab replaces it in both directions; on the Hover tab it only applies while hovering, and the element returns in 0.3 seconds.
- Custom Hover only looks inside the same widget. A Custom Hover class on a container around the widget does nothing, and two Hover Card widgets using the same class do not affect each other.
- Responsive settings follow Elementor’s breakpoints: tablet up to 1024 px, mobile up to 767 px.
- On touch screens (tested in Chrome’s phone emulation) a tap shows the hover state and a tap elsewhere removes it.
- The widget works the same in the free plugin and with Pro active.
Limitations
- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released.
- Style and Script content is only printed for logged-in administrators. Visitors and other users do not get it. Elementor also caches widget output by default (Elementor > Settings > Performance > Element Cache, 1 Day), so the first person to view the page decides for everyone until the cache expires. Set the widget’s Advanced > Cache Settings to Inactive to render it fresh for each viewer.
- Custom Script code that contains &&, < or > stops with a syntax error, and the script runs before the card’s HTML exists on the page.
- The Custom Hover Enter Class of Text Style and Image Style is ignored: hovering anywhere inside the widget triggers the effect. The Background Style Custom Hover works as described.
- Custom Hover Opacity 0 is ignored.
- With Display left on Initial, Width/Height, absolute offsets and image sizes have no visible effect.
- Images get no alt text.
- A row with Open Tag None and Close Tag Default closes the widget’s own wrapper, so every later row ends up outside it. Set Close Tag to None on such rows unless they close a tag an earlier row opened.
Troubleshooting
Width, Height or an offset does nothing
Set Display to Block (or Inline Block, Flex) and switch on Width/Height Options.
The element is scaled before I hover
Move the Transform css value from the Normal tab to the Hover tab.
Custom Hover does nothing
Type the class with a dot, for example .product-card, and give that class to a row that wraps the element inside the same widget.
My CSS or script works for me but not for visitors
Style and Script content is only output for administrators. Add the CSS or script somewhere visitors receive it instead.
Visitors see my CSS, or I no longer see it
Elementor’s Element Cache stored the output of the first view. Set the widget’s Advanced > Cache Settings to Inactive.
