Add link previews to WordPress

Rest the mouse on a link to one of your own pages and a small card opens beside it, with the page’s title, its excerpt and, if you like, its picture.

Get Grinner free

See it live

Type

A setting on Paragraph and List

Find it

Paragraph or List settings, Preview cards on links

Phones

No cards on touch screens, links just open

Speed

A card’s picture loads only as it opens

Live demo

Rest on a link.

This is the real Link hover cards setting, running on this page.

Start with a Text Rotator in your hero, pile up your steps with Card Pile , show how far along you are with a Progress Bar and list your work with a Hover List . Then get Grinner from WordPress.org.

Cards open with a mouse or the keyboard. On a phone, the links simply open.

Link hover cards on a phone, a tapped link opening its page instead of a card

Settings Preview cards on links on Card design Image on top Open delay (ms) 300

What you can change

The settings worth knowing.

Switch it on for a block, then pick a card design and a delay.

Card design

Three card designs

Compact text, Thumbnail on the left or Image on top. A page with no featured image gets the compact card.

Try it on Countdown , with no wait.

Open delay (ms)

A short wait

From 0 to 1,000 milliseconds, 300 if you leave it. Moving away or pressing Esc closes the card.

Link hover cards on your own pages, one link with a card and an outside link without one

Preview cards on links

Your own pages only

Cards show for links to your published pages and posts. Links to other sites, drafts and private pages open as normal.

Link hover cards excerpt, a page’s excerpt box feeding the text of its card

Page excerpts

Write the excerpt

The card shows the page’s written excerpt. Switch on Page excerpts in Grinner’s Editor settings and give each page a sentence or two.

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

Turn on previews

Select a Paragraph or List with links to your own pages and switch on Preview cards on links.

3

Choose a design

Pick a card design and an open delay, write each page’s excerpt, then publish.

Good to know

Fair questions.

Small preview cards that open when the mouse rests on a link to one of your own pages or posts. They show the page’s title, its excerpt and, in two designs, its picture.

Almost none. The script is about 1 KB and loads only where a card exists, and a card’s picture loads only as it’s about to open.

Touch screens have no hover, so phones never show a card and the link simply opens. That’s why a card should never be the only place for something important.

Yes. Tabbing to a link opens its card, and Esc closes it. With reduced motion on, the card appears without its animation.

Cards only show for this site’s published, public pages and posts. Links to other sites, drafts and private pages open as normal links.

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 text features