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).

A Front-end only badge notes that the card is shown to your visitors and is completely independent of which suggestion engine you use.

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

Card 1: Enable link previews

• Preview cards — master switch for the whole feature
• Apply to — Internal links and/or External links checkboxes
• Domain exclusions — textarea, one domain per line. Links to these don't show a preview.

Card 2: Behavior

• Position — which side of the link the card sits on
• Offset — pixels of breathing room
• Animation and Speed — how the card appears and how fast
• 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 color
• Max width (pixels)
• Padding (inside the card)
• Font family — Theme default (inherit) or a named font

Card 4: Border & shadow

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

Card 5: Card content

Which pieces of the destination show up:

• Featured image toggle, with Image layout (max height, position, radius)
• Hide if no image — collapses the image area when the destination has none
• Placeholder color — shown when an image is missing and "Hide if no image" is off
• Show title toggle + Title style (size, color, weight) and Title layout (align, transform, max length)
• Show description toggle + style and layout (line height, align, max length)
• Show domain and Favicon — the destination's domain name and site icon

Card 6: Call-to-action button

An optional button at the bottom of the preview that opens the link: Show CTA, Button text, Button colors, Button text style and Button shape (padding and radius).

Card 7: Mobile

• Mobile optimizations — apply the Mobile sizes below (max width, title size, description size) on small screens
• Disable on mobile — hide previews on phones entirely

Card 8: Advanced

• Preset theme — Custom (use settings above), Minimal, Elegant, Modern, Dark mode, Colorful or High contrast. Choosing a preset overwrites the cards above; pick Custom to use your own values.
• Custom CSS — applied last, overrides everything above. Use sparingly.

Card 9: Live preview

A sample preview card using your current settings. Change a color, font or layout above and 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 no-link-preview to any <a> tag in your post content, or wrap a block of links in an element with the class no-link-preview-container. Linkilo skips those links. Links inside headers, footers, navigation menus, sidebars and widgets are skipped automatically.

It doesn't show on mobile

Mobile devices don't have hover. The Link Preview is desktop-first. Use the Mobile card to shrink the card for small screens, or tick Disable on mobile to hide it there completely. Click anywhere to open combined with a short hover 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 Behavior → Position, try a different side
• In Behavior → 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 finer control, exclude destinations via Domain exclusions, or add the no-link-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.

Last reviewed for Linkilo 3.0.0 (October 2026).