---
title: "How to Add Hover Effect With Custom Hover Class in WordPress Hover Card?"
url: https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/
date: 2024-12-16
modified: 2026-03-31
author: "Aditya Sharma"
description: "The Hover Card block from Nexter Blocks allows you to create a hover effect simply by assigning a parent container class name. This class enables you to apply custom styles..."
image: https://nexterwp.com/wp-content/uploads/2024/12/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card-1024x519.jpg
word_count: 366
---

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

The Hover Card block from Nexter Blocks allows you to create a hover effect simply by assigning a parent container class name. This class enables you to apply custom styles and animations to the hover state, making your website more interactive and visually appealing for users.

*To check the complete feature overview documentation of the Nexter Blocks Hover Card block,* *[click here](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/hover-card-animations-wordpress/)

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 change the button background color when someone hovers over the “*card*” container.

So in the Hover Card block, 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** section as well.

> *Note: Make sure to style the elements according to your needs.*

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 without ****.(dot)**** in front.*

From the **Background** section, we’ll change the background color. 

Now, if you hover over the card container, the button background color will change.