Add a hover image list to WordPress

A list of big link rows, like services or projects. Point at a row, or tab to it, and its picture appears beside the list, behind it, in the row or under the mouse.

Get Grinner free

See it live

Type

A Grinner block

Find it

Press + and search “Hover List”

Phones

No hover, so the first picture sits above the list

Speed

Three of the five layouts need no script

Live demo

Point at a row.

This is the real Hover List block, running on this page.

Text RotatorTextBlockOne line whose words take turns, with the transition you pick.
Card PileScroll and motionBlockCards that stick near the top and pile up as the page scrolls.
Image SliderImagesBlockA strip of images that scrolls on its own, with soft faded edges.
ParallaxScroll and motionSettingA section, or the things inside it, drifting at its own speed.
CountdownBlocksBlockA live timer to a date, as boxes, flip cards, words or one line.

Settings Preset Split Image reveal Wipe up Row effect Dim the others

What you can change

The settings worth knowing.

Pick a preset first. Then choose how pictures arrive and what the rows do.

Preset

Five layouts

Work index, Split, Background swap, Inline thumbnail and Expanding panels. Swap between them and your rows stay as they are.

Hover List picture reveals, a picture fading, wiping up, scaling and tilting into its frame

Image reveal

How pictures arrive

Fade, Wipe up, Scale or Tilt, set once for the whole list.

Row effect

What the rows do

Colour the title, shift it along, or dim every other row so one stands out.

Text · Block

One line whose words take turns, with the transition you pick.

See the feature

Scroll and motion · Block

Cards that stick near the top and pile up as the page scrolls.

See the feature

Blocks · Block

A live timer to a date, as boxes, flip cards, words or one line.

See the feature

Open on hover

Panels that widen

With Expanding panels, the panel under the mouse widens after a short delay you set. On a touch screen a tap opens it.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Add Hover List

Press + and search for Hover List, pick a preset, then fill in each row and its picture.

3

Choose the reveal

Set how pictures arrive and what the other rows do, then publish.

Good to know

Fair questions.

A list of big link rows where each row carries its own picture. The picture shows when someone points at the row or tabs to it, so the list stays clean until people explore it.

Split, Background swap and Inline thumbnail run on styles alone. Work index and Expanding panels add a small script. Pictures that aren’t showing wait until they’re needed.

There’s no hover on a phone. Split shows one picture above the list, Inline thumbnail shows every thumbnail, Work index shows just the rows, and panels open with a tap.

Yes. Tabbing to a row shows its picture, the same as pointing at it, even on a row with no link. With reduced motion on, pictures swap instantly.

No. The block treats them as decoration, so write row titles that name each item. Video isn’t supported either.

Yes. Pick the Expanding panels preset and the panel under the mouse opens after a short delay while the others close up. On a touch screen a tap opens it.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

Studio-quality design
Built for speed
Pay once, no subscription

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All images features