🔗 LinkImageHover Component
A link component that displays an image preview when you hover over it. Perfect for adding visual context to text links, creating engaging navigation menus, or enhancing article references.
Basic Example
Hover over the link below to see the image preview appear above it with a smooth blur transition.
View Code Example
<script>
import LinkImageHover from '$lib/components/LinkImageHover.svelte';
</script>
<LinkImageHover
href="https://example.com"
text="Link Text"
imageSrc="https://example.com/image.jpg"
imageAlt="Image description"
/>City Links Grid
A grid layout displaying major cities around the world. Hover over each city to see its preview image.
View Code Example
<div class="grid">
{#each cityLinks as link}
<LinkImageHover
href={link.href}
text={link.text}
imageSrc={link.imageSrc}
imageAlt={link.imageAlt}
/>
{/each}
</div>Navigation Grid
Use in a grid layout for navigation menus or category listings with visual previews.
View Code Example
<div class="grid">
{#each links as link}
<LinkImageHover
href={link.href}
text={link.text}
imageSrc={link.imageSrc}
imageAlt={link.imageAlt}
/>
{/each}
</div>Custom Image Sizes
Control the preview image size using the imageWidth prop with Tailwind
classes.
View Code Example
<LinkImageHover imageWidth="h-32 w-32" ... />
<LinkImageHover imageWidth="h-44 w-44" ... />
<LinkImageHover imageWidth="h-64 w-64" ... />Component Features
Smooth Transitions
Uses Svelte's built-in blur transition for elegant image appearance.
Positioned Perfectly
Image appears above the link with consistent spacing and positioning.
Customisable Size
Control preview image dimensions with Tailwind width/height classes.
Zero Dependencies
Pure Svelte implementation with no external libraries required.
Accessible
Proper link semantics with alt text, external link attributes, and keyboard support.
Lightweight
Minimal JavaScript with efficient event handling and cleanup.
Quick Start Guide
Copy the Component
Copy LinkImageHover.svelte from src/lib/components/ to
your project.
Prepare Content
Gather your link URLs and corresponding preview images. Ensure images are optimised for web display.
Use in Your Layout
Import and place links in paragraphs, grids, or navigation menus. The component handles all hover interactions automatically.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | 'https://example.com' | URL the link points to |
text | string | 'Link Text' | Link text to display |
imageSrc | string | placeholder | URL to the preview image |
imageAlt | string | 'Preview Image' | Alt text for the preview image |
imageWidth | string | 'h-44 w-44' | Tailwind width/height classes for image |
target | string | '_blank' | Link target attribute |
Use Cases
📚 Documentation
Add visual previews to reference links in documentation and technical articles.
🗺️ Travel Guides
Show location previews when users hover over destination names and places.
📰 Article References
Display thumbnails for cited sources and related articles in blog posts.
🛍️ Product Links
Preview product images when hovering over product names in descriptions.
👥 Team Directory
Show profile photos when hovering over team member names in lists.
🎨 Portfolio
Preview artwork or project images when browsing project names and categories.