---
title: "How to Create Hover Card Animation in WordPress?"
url: https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/
date: 2024-12-16
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Most card blocks hand you a shape and ask you to live in it. This one hands you the tags. The Hover Card block is a small HTML builder: you..."
image: https://nexterwp.com/wp-content/uploads/2024/12/create-hover-card-animation-in-wordpress-1024x519.jpg
word_count: 720
---

# How to Create Hover Card Animation in WordPress?

## Key Takeaways

- Hover Card block works in Nexter Blocks free and Nexter Blocks Pro, and it is enabled under Nexter > Blocks in the WordPress dashboard.
- Render HTML is required before anything appears, because the block does not redraw as rows are typed.
- Hover Card block accepts only 21 tags, including div, h1 to h6, a, span, p, header, footer, article, aside, main, nav, section, tr, th and td; anything else turns into a div.
- Custom Hover applies styling to the row that carries the setting when a named parent is hovered, and per-row styling can reach the front end with values like 300 by 120 pixels, 20 pixels of padding, and a 12-pixel radius.

Most card blocks hand you a shape and ask you to live in it. This one hands you the tags.

The Hover Card block is a small HTML builder: you add rows, each row opens a tag, holds some content or closes a tag, and the block renders them in order. Then any row can restyle itself when a visitor hovers a parent you name.

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

## Before You Start

- **Edition:** Free — the Hover Card block works in Nexter Blocks (free) and in Nexter Blocks Pro.- **Block to enable:** Hover Card, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A little HTML.** This block builds markup out of the rows you add, so it helps to know what a tag is and which tag wraps which.

![Nexter Blocks Hover Card editor: Code Structure row open with Open Tag set to Div and Class Name travel-card, the rendered card in the canvas](https://nexterwp.com/wp-content/uploads/2026/09/hover-card-open-close-tags-full.webp)

## Steps

- Add the **Hover Card** block to your page.

- Open the row already waiting under **Code Structure**, or press **+ Add Structure** for another one.

![The Code Structure repeater](https://nexterwp.com/wp-content/uploads/2026/09/hc-structure.webp)

- Choose the wrapper in **Open Tag**, and close it in **Close Tag**.

![The Open Tag setting](https://nexterwp.com/wp-content/uploads/2026/09/hc-opentag.webp)

- Pick what goes inside in **Content** — nothing, text, an image or HTML.

![The Content type chooser](https://nexterwp.com/wp-content/uploads/2026/09/hc-content.webp)

- Add more rows for the rest of your card, in the order the markup should appear.

- Press **Render HTML** to draw the structure, then publish.

![The Render HTML button](https://nexterwp.com/wp-content/uploads/2026/09/hc-render.webp)

> ***Nothing appears until you press Render HTML.** The block does not redraw as you type — the button above the repeater rebuilds the structure, and the block's own note says to check every tag is opened and closed first.*

## What Each Row Can Hold

| Content | What renders | Guide |
| ------- | ------------ | ----- |
| Text | Plain text inside the row’s tag | [Text content](https://nexterwp.com/docs/use-the-text-content-with-the-hover-card-in-wordpress/) |
| Image | An image from your Media Library, at full size | [Image content](https://nexterwp.com/docs/use-the-image-content-with-the-hover-card-in-wordpress/) |
| HTML | Your own markup, filtered | [HTML content](https://nexterwp.com/docs/use-the-html-content-with-the-hover-card-in-wordpress/) |
| None | Just the tag — how you open and close wrappers | [Nesting elements](https://nexterwp.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/) |

## The Rest of a Row

| Setting | What it does | Guide |
| ------- | ------------ | ----- |
| Open Tag / Close Tag | The markup this row emits | [Nesting elements](https://nexterwp.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/) |
| Class Name | A class on this row, for your own CSS | [Custom layout](https://nexterwp.com/docs/create-a-custom-layout-with-the-hover-card-in-wordpress/) |
| Position, size, spacing | Per-row layout, including absolute pinning | [Custom layout](https://nexterwp.com/docs/create-a-custom-layout-with-the-hover-card-in-wordpress/) |
| Custom Hover | Restyle this row when a parent is hovered | [Custom hover class](https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/) |

## How It Behaves

- **The rows are the markup.** They are concatenated in order, so a row that opens a `div` and never closes it wraps everything after it — which is exactly how you nest.- **Only 21 tags are accepted** — div, h1 to h6, a, span, p, header, footer, article, aside, main, nav, section, tr, th and td. Anything else is silently turned into a `div`, measured.- **A link needs Open Tag set to A.** Fill in a URL on a row whose tag is anything else and the URL is dropped without a warning — measured.- **Per-row styling really does reach the front end.** A row set to 300 by 120 pixels with 20 pixels of padding and a 12-pixel radius measured exactly that on a published page.- **Custom Hover watches a parent, not the row itself.** The class you type belongs to an element you hover; the styling lands on the row that carries the setting.

## Limitations

- **You are writing markup.** There is no visual canvas to drag things around in — rows in, structure out.- **Nothing redraws by itself.** Every change needs another press of Render HTML.- **Images come out at full size** and carry the alt text *Card Image* unless you set alt text on the attachment — measured.- HTML content is filtered, so scripts and anything else outside WordPress’s post rules will not survive.- Unbalanced tags produce broken markup. The block does not check them for you.

## Troubleshooting

### The block is empty on the canvas

Press **Render HTML**. The block only draws when you ask it to.

### My row came out as a div even though I chose another tag

The tag is not on the accepted list. Only 21 tags are accepted — div, h1 to h6, a, span, p, header, footer, article, aside, main, nav, section, tr, th and td. Anything else is silently turned into a `div`, measured.

### My link does nothing

Set **Open Tag** to **A** on that row. With any other tag the URL is thrown away.

### The card looks wrong after I added a row

Count your tags. Every **Open Tag** with Close Tag set to None needs a later row that closes it, or the rest of the page ends up inside it.

### The block is missing from the inserter

Switch **Hover Card** on under **Nexter > Blocks**.

![Hover Card switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/hc-admin-enable.webp)

## Related Docs

- [Text content](https://nexterwp.com/docs/use-the-text-content-with-the-hover-card-in-wordpress/)- [Image content](https://nexterwp.com/docs/use-the-image-content-with-the-hover-card-in-wordpress/)- [HTML content](https://nexterwp.com/docs/use-the-html-content-with-the-hover-card-in-wordpress/)- [Multiple elements inside one element](https://nexterwp.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/)- [Custom hover class](https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/)- [Build a custom layout](https://nexterwp.com/docs/create-a-custom-layout-with-the-hover-card-in-wordpress/)

## Frequently Asked Questions

**Q: Why does the Hover Card block stay empty until I render it?**
A: The block only draws when you press Render HTML, because Nexter Blocks builds the markup from the rows you add instead of showing a live visual canvas. That means the canvas can look empty even when the structure is already set up. A useful habit is to treat each row like actual HTML, since unbalanced tags can break the output before it ever appears.

**Q: What tags can I use in a Hover Card row?**
A: Only 21 tags are accepted: div, h1 to h6, a, span, p, header, footer, article, aside, main, nav, section, tr, th and td. Anything else is silently turned into a div. That matters if you are trying to build a specific structure, because an unsupported tag will not fail loudly and can change how the final markup behaves.

**Q: Why does my link not work in Hover Card?**
A: The URL only survives when Open Tag is set to A on that row. If the row uses any other tag, the URL is dropped without a warning. That makes links easy to miss during setup, so the safest pattern is to keep the anchor row explicit and verify that the tag itself is A before expecting click behavior.

**Q: What happens if I forget to close a Hover Card tag?**
A: The rest of the page can end up inside that open element. The rows are concatenated in order, so an Open Tag with Close Tag set to None needs a later row that closes it. This is how nesting works in Nexter Blocks, but it also means one missing close tag can distort everything after it.

**Q: Can I use Hover Card for custom layouts with images and HTML content?**
A: Nexter Blocks supports both image content and HTML content inside Hover Card rows. Images come from your Media Library at full size, and HTML content is filtered by WordPress post rules. That makes it useful for custom card structures, but scripts and other disallowed markup will not survive in the final output.

**Q: What should I use for hover effects on just part of a card?**
A: Custom Hover targets a parent element by class name and applies the styling to the row that carries the setting. That means the class belongs on the element you hover, not on the row you want restyled. For more complex setups, the related docs on [Custom hover class](https://nexterwp.com/docs/add-hover-effect-with-custom-hover-class-in-wordpress-hover-card/) and [Nesting elements](https://nexterwp.com/docs/add-multiple-elements-inside-one-element-in-elementor-hover-card/) are the right follow-up.