---
title: "How to Use the Image Content With the Hover Card in WordPress?"
url: https://nexterwp.com/docs/use-the-image-content-with-the-hover-card-in-wordpress/
date: 2024-12-16
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "The picture is usually the reason anyone looks at the card. Setting a row’s Content to Image puts a Media Library image inside that row’s tag, with its own width,..."
image: https://nexterwp.com/wp-content/uploads/2024/12/use-the-image-content-with-the-hover-card-in-wordpress-1024x519.jpg
word_count: 452
---

# How to Use the Image Content With the Hover Card in WordPress?

## Key Takeaways

- Hover Card block funciona en Nexter Blocks gratis y en Nexter Blocks Pro, y se activa en Nexter > Blocks dentro del panel de WordPress.
- Contenido en Image inserta una imagen de la Media Library dentro de la etiqueta de la fila, con ancho, radius, shadow, opacity y versiones hover propias.
- Alt text sale del adjunto, luego del título y después de las palabras literales Card Image; la imagen se inserta a tamaño completo 1200 por 800 hasta que Image Width la reduce.

The picture is usually the reason anyone looks at the card.

Setting a row’s Content to Image puts a Media Library image inside that row’s tag, with its own width, radius, shadow and hover settings.

*For every Dynamic Device setting in one place, see the [Hover Card block guide](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/).*

[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.- **An image in your Media Library**, ideally with alt text already filled in.

![Nexter Blocks Hover Card editor: a Div row with Content set to Image and a photo chosen from the Media Library](https://nexterwp.com/wp-content/uploads/2026/09/hover-card-image-content-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)

- Set **Content** to the image option.

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

- Choose your image, then set **Image Width** so it fits the card.

![The image settings on a row](https://nexterwp.com/wp-content/uploads/2026/09/hc-image.webp)

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

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

> ***Set alt text on the attachment.** Measured: an image with no alt text rendered alt="Card Image" on the live page — the block’s own fallback, and the same words on every image you add.*

## How It Behaves

- **The image is inserted at full size.** The rendered tag carried `class="attachment-full size-full"` at the original 1200 by 800 pixels, so use **Image Width** to bring it down rather than uploading a giant file.- **Alt text comes from the attachment**, falling back to its title, and then to the literal words *Card Image* — measured.- **The image has its own styling** on the row: width, max width, border, radius, shadow and opacity, each with a hover version.- **It is a real `<img>`**, not a CSS background, so it counts for image search — which is exactly why the alt text matters.

## Limitations

- **One image per row.** Two images mean two rows.- There is no image-size chooser: the full size is inserted and sized with CSS.- An image row cannot also hold text — add a second row for the caption.- Nothing appears until Render HTML is pressed.

## Troubleshooting

### The image is enormous

It is at full size by default. Switch on **Width/Height Options** on that row and set **Image Width**.

### Every image says “Card Image” to a screen reader

That is the fallback. Open the image in the Media Library and fill in its **Alternative Text**.

### The image is not showing at all

Check **Content** is set to the image option, that an image is chosen, and that you pressed **Render HTML**.

## Related Docs

- [Hover Card block guide](https://nexterwp.com/docs/create-hover-card-animation-in-wordpress/)- [Text content](https://nexterwp.com/docs/use-the-text-content-with-the-hover-card-in-wordpress/)- [HTML content](https://nexterwp.com/docs/use-the-html-content-with-the-hover-card-in-wordpress/)- [Build a custom layout](https://nexterwp.com/docs/create-a-custom-layout-with-the-hover-card-in-wordpress/)