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.
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.
Steps
- Add the Hover Card block to your page.
- Open the row already waiting under Code Structure, or press + Add Structure for another one.
- Choose the wrapper in Open Tag, and close it in Close Tag.
- Set Content to the image option.
- Choose your image, then set Image Width so it fits the card.
- Press Render HTML to draw the structure, then publish.
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.
