---
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-04-11
author: "Aditya Sharma"
description: "With the Hover Card widget from The Plus Addons for Elementor, you can easily trigger a hover effect by adding a parent container class name. By assigning a specific class..."
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: 411
---

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

## Key Takeaways

- The Plus Addons for Elementor Hover Card widget allows users to trigger hover effects by adding a parent container class name.
- Users can add custom styling and animations for the hover state in the Background Style section of the Hover Card widget.
- To create a scale effect, users must add transform CSS like scale(1.1) in the Transform css field when hovering over the designated container.

With the Hover Card widget from The Plus Addons for Elementor, you can easily trigger a hover effect by adding a parent container class name. By assigning a specific class to the element, you can add custom styling and animations for the hover state, creating a visually appealing effect that enhances user interactivity.

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

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

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

You can find the Custom Hover option in Background Style as well as in Text and Image content type separately, but the process works similarly for all.

Here we’ll use the Custom Hover option from Background Style.

For example, we have an anchor tag button inside a container class called “*card*”. 

Now we want to add a scale effect to the button when someone hovers over the “*card*” container.

So in the Hover Card widget, we have an item with **Div** as the **Open Tag** and **card** as the class name, since we want to add an anchor tag inside the div, we’ll set **None** as the **Close Tag**. We’ll select **None** in the **Content** because this div is just a container. 

Then, in the second item, we’ll select **a** as the **Open Tag** and **Default** as the **Close Tag**. In the **Content,** we’ll select **Text** and add text for the button.

In the third item, we’ll set **None** as the **Open Tag** and **Div **as the **Close Tag** since we want to close the **card** container here.

Set **None** in the **Content** dropdown as well.

![hover card structure custom hover](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-structure-custom-hover.gif)

> *Note: Make sure to style the elements from the ****Style**** and ****Background Style**** section according to your need.*

Now open the second item and turn on the **Background** toggle under the **Background Style** section. 

Go to the **Hover** tab and turn on the **Custom Hover** toggle. In the **Enter Class** field, add the parent container class name you want to target, for instance, we’ll add “*.card*” here.

> *Note: Make sure to add the class name with ****.(dot)**** in front.*

Now to add the scale effect, go to the **Transform css** field and add the transform CSS. For instance, we’ll add *scale(1.1)*. 

![hover card custom hover option](https://theplusaddons.com/wp-content/uploads/2023/07/hover-card-custom-hover-option.gif)

Now if you hover over the card container, the button will grow.

Also, read [How to Create a Custom Layout With the Hover Card in Elementor](https://theplusaddons.com/docs//create-custom-layout-with-hover-card-in-elementor/).

## Frequently Asked Questions

**Q: What should I do if the hover effect isn't working?**
A: If the hover effect isn't triggering, check that you've correctly added the parent container class name in the Enter Class field. It should start with a dot, like '.card'. If the class is missing or incorrectly formatted, the custom hover styling won't apply. Also, ensure that the Background toggle is enabled in the Background Style section.

**Q: What is the best way to add a scale effect using the Hover Card?**
A: To add a scale effect, first ensure you've set the parent container class name in the Custom Hover option. Then, in the Transform CSS field, input 'scale(1.1)' to make the button grow on hover. This approach creates a visually appealing interaction that draws attention to the button, enhancing the overall user experience.

**Q: What happens if I forget to add the dot before the class name?**
A: If you forget to include the dot before the class name in the Enter Class field, the hover effect won't be applied. The dot is essential as it indicates that you're referencing a class in CSS. Without it, the styling won't recognize the class, and the intended hover effect will not trigger.