---
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
lang: en
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?

## 

- Utilizes the Hover Card widget from The Plus Addons for Elementor to create hover effects by adding a parent container class name.
- Enables Custom Hover options in Background Style for individual content types, allowing for consistent hover effects across elements.
- Implements a scale effect on an anchor tag button within a container class named 'card' using CSS transform properties.

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