---
title: "How to Add Hover Effect With Custom Hover Class in Elementor Hover Card?"
url: https://theplusaddons.com/docs/add-hover-effect-with-custom-hover-class-in-elementor-hover-card/
date: 2023-07-04
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A card often needs its button to change when the pointer is anywhere over the card, not only over the button. The Custom Hover option of the Hover Card widget..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/How-to-Add-Hover-Effect-With-Custom-Hover-Class-in-Elementor-Hover-Card_-1024x536.jpg
word_count: 627
---

# How to Add Hover Effect With Custom Hover Class in Elementor Hover Card?

## 

- The Plus Addons for Elementor Hover Card widget uses Custom Hover to make a child row react while a parent row is hovered, so the effect runs anywhere over the card, not only over the button.
- Hover Card is part of the free The Plus Addons for Elementor plugin, and the editor says it is deprecated since The Plus Addons for Elementor 6.5.0 and will be completely removed in 6.6.0.
- Custom Hover requires a parent class entered without a dot on the parent row, then the same class with a dot in Enter Class on the child row, such as card-zone and .card-zone.
- Custom Hover supports Background Classic, Gradient, Image, Border Style, Box Shadow, Transition css, Transform css, CSS Filter, and Opacity, but an Opacity of 0 is ignored.

A card often needs its button to change when the pointer is anywhere over the card, not only over the button.

The **Custom Hover** option of the **Hover Card** widget in The Plus Addons for Elementor does that: you give a parent row a class, and the effect on the child row runs while the parent is hovered.

*To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, [click here](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/).*

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

## How to Add a Custom Hover Effect

- Build the parent: a row with **Open Tag** Div, a class in **Enter Class** such as **card-zone** (no dot here), **Close Tag** None and **Content** None.- Add the child rows inside it, for example a row with **Open Tag** a, **Close Tag** Default and **Content** Text for the button, then close the parent with a row whose **Open Tag** is None and **Close Tag** is Div.

![Rows of the example: a div with a class, an a tag with text, and a row that closes the div](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-structure-custom-hover.gif)

- Open the button row. Under **Background Style**, switch on **Background**, open the **Hover** tab and switch on **Custom Hover**.- In **Enter Class**, type the parent's class **with a dot**: **.card-zone**.

![Hover tab of the button row with Custom Hover on and .card-zone in Enter Class](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-custom-hover.webp)

- Set the effect, for example **Background** Classic with a dark colour, **Transform css** **scale(1.1)** and **Transition css** **all .5s ease**.

![Custom Hover settings of the button row with Transition css and Transform css filled in](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-custom-hover-transform.webp)

![Setting Custom Hover and Transform css, and hovering the card on the canvas](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-custom-hover-option.gif)

On the published page the button turns dark and grows as soon as the pointer is over the card:

![Product card with a blue Shop now button before hovering](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-custom-hover.webp)

![The same card while hovering, with a larger dark Shop now button](https://theplusaddons.com/wp-content/uploads/2026/09/hovercard-result-custom-hover-hover.webp)

## Custom Hover Settings

| Setting | What it does |
| ------- | ------------ |
| **Enter Class** | The parent class, with a dot. The parent must be a row of the same widget that wraps this row. |
| **Background** | Classic colour, Gradient (linear with angle, or radial with position) or Image with position, attachment, repeat and size. |
| **Border Style**, **Border Width**, **Border Color**, **Border Radius** | Border while the parent is hovered. |
| **Box Shadow** | Popover with colour, horizontal, vertical, blur and spread. |
| **Transition css** | How long the change takes while the parent is hovered, for example all .5s ease. |
| **Transform css** | For example scale(1.1). |
| **CSS Filter** | Popover with blur, brightness, contrast, saturation and hue. |
| **Opacity** | 0 to 1 while hovered. |

## How It Behaves

- The effect runs while the pointer is anywhere over the parent, including over the element itself.- It only looks inside the same widget: a class on an Elementor container around the widget does nothing, and a second Hover Card widget with the same class does not trigger it.- While Custom Hover is on, the normal Hover tab settings of the row are not used.

## Limitations

- Without the dot (**card-zone**), with the row's own class, or with an empty Enter Class, nothing happens.- An **Opacity** of 0 is ignored.- The Custom Hover switches under **Text Style** and **Image Style** ignore their Enter Class and react to a hover anywhere inside the widget. Use this Background Style Custom Hover when the parent matters.- The widget is deprecated and will be removed once The Plus Addons for Elementor 6.6.0 is released.

## Troubleshooting

### Nothing changes when I hover the card

Check that **Enter Class** starts with a dot and that the class belongs to a row that opens before, and closes after, the row you are styling.

## Related Docs

- [Hover Card widget settings overview](https://theplusaddons.com/docs/hover-card-elementor-widget-settings-overview/)- [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/)

## Frequently Asked Questions

**Q: How do I add a hover effect to a button inside a Hover Card when the whole card is hovered?**
A: The key is to give the parent row a class, then target that class from the child row’s Custom Hover settings. In this tutorial, the parent uses a class like `card-zone` without a dot, and the button row uses `.card-zone` with the dot in Enter Class. That setup makes the child row react while the pointer is anywhere over the parent card, not just over the button itself.

**Q: Why is my custom hover effect not triggering in Elementor Hover Card?**
A: The most common miss is the class format or scope. Enter Class needs the parent class with a dot, like `.card-zone`, and that class has to belong to a row that opens before and closes after the row you are styling. A class on an Elementor container around the widget does not count, and an empty Enter Class will do nothing. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses same-widget row matching here.

**Q: What can I change in Custom Hover settings for Hover Card?**
A: Custom Hover gives you several hover-state controls: Background, Border Style, Border Width, Border Color, Border Radius, Box Shadow, Transition css, Transform css, CSS Filter, and Opacity. That matters because you are not limited to color changes. For example, the page shows a dark background plus `scale(1.1)` and `all .5s ease`, which creates both visual contrast and motion timing in one hover state.

**Q: Does Custom Hover work on a parent container outside the Hover Card widget?**
A: No. The effect only looks inside the same Hover Card widget. A class on an Elementor container around the widget does nothing, and even another Hover Card widget with the same class will not trigger it. That limitation is important if you are trying to control multiple cards from one wrapper. The Plus Addons for Elementor keeps this behavior scoped to rows inside one widget instance.

**Q: What should I use for a card-wide hover effect instead of normal row hover settings?**
A: Use Background Style Custom Hover when the parent card matters. The page says that while Custom Hover is on, the normal Hover tab settings of the row are not used. It also notes that Text Style and Image Style Custom Hover ignore their Enter Class and react to hover anywhere inside the widget, so they are not the right choice when you need parent-based control.

**Q: Is Hover Card still safe to use for new pages?**
A: The page flags Hover Card as deprecated since The Plus Addons for Elementor 6.5.0 and says it will be completely removed once 6.6.0 is released. It also says no replacement widget is named. That makes it a poor choice for new builds even though it still works now in The Plus Addons for Elementor free edition and with Pro installed.