Start from the design, not from the block.
Because every row carries its own size, spacing, background and position, a Hover Card structure can be shaped into whatever the design asks for — including things pinned on top of other things.
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.
- A rough design. Knowing which parts sit inside which makes the rows obvious.
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.
- Build the skeleton first: a container row, the rows inside it, and a row that closes the container.
- Give the container a class so you can style and hover it later.
- On each row, switch on Width/Height Options and set the size, Margin and Padding.
- Use Position to pin anything that sits on top of something else.
- Press Render HTML to draw the structure, then publish.
Build the structure before the styling. Moving a row later changes the markup, and any hover class that pointed at it has to move too.
What Each Row Can Control
| Setting | What it does | Guide |
|---|---|---|
| Width/Height Options | Width, min width, height, min height | — |
| Margin, Padding | Spacing outside and inside the row | — |
| Position, offsets, Z-Index | Relative or absolute, with top, right, bottom, left | — |
| Display, Alignment CSS Options | Block or flex, and how children line up | Nesting elements |
| Background, Border, Radius, Shadow | The look of the row, with a hover version | Custom hover class |
How It Behaves
- Per-row settings really do render. A row set to 300 by 120 pixels with 20 pixels of padding, a 12-pixel radius, a green background and white text measured exactly that on a published page.
- Pinning works the normal CSS way. A row set to Absolute with Top 15 and Right 15 inside a Relative container rendered
position: absolute; top: 15px; right: 15px— measured. Set the container to Relative first. - Flex belongs on the container row, not on the children: set Display to flex there and the rows inside line up.
- Class Name is the escape hatch. Anything the settings will not do, you can do in your theme’s CSS against that class.
- Rows are responsive. Sizes and spacing each have desktop, tablet and mobile values.
Limitations
- There is no drag-and-drop canvas. The layout is a list of rows and their settings.
- Absolute rows are taken out of the flow, so a container with only absolute children can collapse to nothing — give it a height.
- A structure is not reusable on its own: to use the same card twice, copy the block or save it as a pattern.
- Nothing appears until Render HTML is pressed.
Troubleshooting
My absolute element is in the wrong place
It is positioning against the nearest positioned ancestor. Set the container row’s Position to Relative, then the offsets are measured from the container.
The container collapsed to nothing
Absolutely positioned rows do not hold a parent open. Give the container a height under Width/Height Options.
It looks right on desktop and broken on mobile
Size and spacing are set per device. Switch the device icon next to each field and set the tablet and mobile values too.
My badge is hidden behind the image
Raise Z-Index on the badge row.
