---
title: "Hover Card Elementor Widget: Settings Overview"
url: https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/
date: 2023-07-04
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/Hover-Card-Elementor-Widget_-Settings-Overview-1024x536.jpg
word_count: 1370
---

# Hover Card Elementor Widget: Settings Overview

## 

- The Plus Addons for Elementor Hover Card widget lets the editor build an HTML layout row by row, with each row opening and closing tags such as Div, Span, H1-H6, p, or a.
- The Plus Addons for Elementor marks Hover Card as deprecated since 6.5.0 and says it is removed once 6.6.0 is released.
- Hover Card uses a 0.3 second linear transition for every change, and a Transition css value on the Normal tab replaces it in both directions.
- Style and Script content prints only for logged-in administrators, while Elementor Element Cache can keep the first viewer’s output until cache expires or Advanced > Cache Settings is set to Inactive.

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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/hover-card/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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

https://www.youtube.com/watch?v=BksYXVaiGk8

## How to Activate the Hover Card Widget

- Go to **The Plus Addons > Widgets**, search for Hover Card and switch it on.

![The Plus Addons Widgets screen with the Hover Card widget switched on](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card.png)

## 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 ]**.

![Hover Card section with the list of rows and the Add Item button, and the product card they build on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-add-item.webp)

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.

![Product card built with the Hover Card widget: image, title, price and a Shop now button](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-card.webp)

## 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 |

![Open tab of a row with Open Tag set to Div and the class product-card in Enter Class](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-open-tag.webp)

Setting the open and close tags, in motion:

![Choosing the Open Tag and Close Tag of a Hover Card row](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-open-close-tag.gif)

## 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). |

![Choosing the content type of a Hover Card row](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-content-type.gif)

## 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 |

![Display set to Block in the Style settings of the card row](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-display.webp)

## 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.

![Switching on Background and setting the Normal and Hover tabs](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-background-style-option.gif)

![Hover tab of Background Style with Transform css set to scale(1.05) for the card](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-transform-hover.webp)

## 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**.

## Related Docs

- [Create a custom layout with the Hover Card](https://theplusaddons.com/docs/create-custom-layout-with-hover-card-in-elementor/)- [Add multiple elements inside one element](https://theplusaddons.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/)- [Add a hover effect with a Custom Hover class](https://theplusaddons.com/docs/add-hover-effect-with-custom-hover-class-in-elementor-hover-card/)- [Use Text content with the Hover Card](https://theplusaddons.com/docs/use-text-content-with-hover-card-in-elementor/)

## Frequently Asked Questions

**Q: Why is my Hover Card width or height not changing in Elementor?**
A: Width, height, and offsets only take effect when the tag is actually allowed to size itself. The page says Display must be set to Block, Inline Block, or Flex, and Width/Height Options must be switched on. If Display stays on Initial, those values can look broken because even a Div behaves like an inline element. That also explains why image sizes and absolute offsets can appear to do nothing.

**Q: Can I build a custom card layout with the Hover Card widget?**
A: The Hover Card widget is built for that exact use case. It lets you build your own HTML layout in Elementor one tag at a time, then style each part for normal and hover states. The page even shows a six-row product card example with the card box, image, title, price, button, and a closing row. For a deeper layout example, see [Create a custom layout with the Hover Card](https://theplusaddons.com/docs/create-custom-layout-with-hover-card-in-elementor/).

**Q: Why does the element scale before I hover it?**
A: That usually happens because Transform css was placed in the Normal tab. The page says Normal tab styles apply all the time, so any transform there changes the element before hover starts. Move the transform value to the Hover tab if you want it to kick in only on hover. That matters because the widget animates changes with a 0.3 second linear transition, so pre-hover transforms are very noticeable.

**Q: How does Custom Hover work in the Hover Card widget?**
A: Custom Hover is meant for hovering a parent element inside the same widget, not the whole page. The class has to be entered with a dot, like .product-card, and it must be applied to a row that wraps the target element inside that same Hover Card. A common gotcha is putting the class on a container around the widget or reusing it across separate Hover Card widgets, which does nothing.

**Q: What are the main limitations of the Hover Card widget?**
A: The biggest limitation is that it is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released. Style and Script content only print for logged-in administrators, and Elementor’s Element Cache can freeze what visitors see until it expires. The page also notes that Custom Script can fail with &&, , images get no alt text, and Custom Hover Opacity 0 is ignored.

**Q: Is the Hover Card widget still worth using for new pages?**
A: It is not a good choice for new pages because the widget is already deprecated and scheduled for removal in The Plus Addons for Elementor 6.6.0. The page says it still works in both free and Pro installs right now, but that does not change the removal risk. If you need something long-term, treat it as an existing-page tool rather than something to build fresh layouts around.