Link Preview (Hover Card)

When a reader hovers over a link on your site, a small card pops up showing a preview of the destination — title, thumbnail, description. Reduces bounce, lifts engagement, gives readers a sense of what they're about to click.

What this is

A fancy on-hover preview card. Works on internal links, external links, or both. You control where it appears, how it animates, what content it shows, and how it's styled.

Get there

Linkilo → Settings → Link Preview (under the Front-end Display group).

The page has nine cards — way more options than the other styling pages.

Card 1: Enable link previews

• Preview cards — master toggle for the whole feature
• Apply to: – Internal links (checkbox) – External links (checkbox)
• Domain exclusions — textarea, one domain per line. Links to these don't show a preview.

Card 2: Behaviour

• Position — where the card appears (above, below, left, right of the link)
• Offset — pixels of breathing room
• Animation — fade, slide, none
• Hover delay — how long the reader hovers before the card appears. 0 = instant.
• Close button — small "✕" so readers can dismiss the card
• Click anywhere to open — clicking the preview card opens the link

Card 3: Card container

Overall look:

• Background colour
• Max width (pixels)
• Padding (inside the card)
• Font family

Card 4: Border & shadow

• Border width, color, radius
• Drop shadow toggle
• Shadow colour (hex or rgba)
• Shadow offset & blur
• Spread

Card 5: Card content

Which pieces of the destination show up:

• Featured image toggle
• Image layout: max height, position (above/left/right), radius
• Hide if no image — collapses the image area when destination has none
• Placeholder colour — shown when an image is missing but you don't want to hide the area
• Show title toggle + style (color, weight, font size, transform, max length)
• Description toggle + styling
• Date, author, excerpt — also configurable

Live demo

At the bottom of the Link Preview page, there's a Live Demo card. It shows how the current settings will look in real time. Change a color, the demo updates without saving.

Click Save Settings to commit changes.

Common Questions

Will this slow down my pages?

A little, but minor. The preview card uses lightweight JavaScript and an on-demand fetch (only when a reader hovers a link). It doesn't slow page load.

Can I disable it on specific links?

Add the class linkilo-no-preview to any <a> tag in your post content. Linkilo skips that link.

It doesn't show on mobile

Mobile devices don't have hover. The Link Preview is desktop-first. Click anywhere to open combined with a short tap-delay can work on tablets, but most mobile users tap and navigate normally.

My theme cuts off the preview card

The card is positioned absolutely on top of your content. If your theme has overflow: hidden on the article container, the card can get clipped.

Quick fixes:

• In Behaviour → Position, try a different side
• In Behaviour → Offset, increase the offset

If clipping persists, contact your theme support and ask them to remove overflow: hidden from post content containers.

Can I show previews only on certain post types?

Not directly — the Preview cards toggle is sitewide. For per-page control, exclude specific domains via Domain exclusions, or add the linkilo-no-preview class to specific <a> tags in your content.

Does it work with internal links inside the WordPress editor?

Yes. Any internal link in published post content gets a preview on hover (if Internal links is checked under "Apply to"). Drafts don't matter — previews only show on the public site.