all code generated by AI.

Image Hover Preview

An Obsidian plugin that shows a floating preview of images when you hover over image links or Markdown image tags.

Features

• Instant preview — Hover over ![]() tags or image links to see a full-resolution preview
• Smart positioning — Preview stays within the editor area, never overflows into sidebars
• Mouse tracking — Preview follows the cursor as you move around the image
• Scroll zoom — Hold a configurable key + scroll wheel to zoom in/out
• Hard zoom limit — Small images can only be enlarged until they fill the editor area, never beyond
• Zoom reset — Automatically resets to 1:1 when preview is closed and reopened
• Caption — Optionally show the file name or custom title at the bottom
• Hover delay — Configurable delay to prevent popups when the mouse just passes by
• Trigger key — Require a modifier key to activate preview
• Temporary suppression — Hold a key to temporarily disable preview (useful for screenshots or selecting text)
• Hover indicator — Visual feedback (outline / custom cursor) when hovering over a previewable element
• Loading spinner — Animated indicator while the image is being loaded
• Customizable style — Background color, border, border radius, box shadow, opacity
• Preload — Automatically scans previewable elements on page load for faster response
• Minimum size filter — Ignores small icons below a configurable size threshold

Installation

Manual

1. Download main.js, styles.css, and manifest.json from the Releases page
2. Place them in your vault's plugin folder: <vault>/.obsidian/plugins/image-hover-preview/
3. Enable Image Hover Preview in Obsidian Settings → Community Plugins

Build from source

git clone https://github.com/your-repo/image-hover-preview.git
cd image-hover-preview
npm install
npm run build

Copy the output files (main.js, styles.css, manifest.json) to your .obsidian/plugins/image-hover-preview/.

Usage

Hover over any image link or Markdown image tag:

![[assets/example.png]]
![alt text](https://example.com/image.jpg)

Zoom

The zoom modifier key can be changed or disabled in settings.

Settings

Compatibility

• ✅ Obsidian v0.15.0+
• ❌ Desktop only (not supported on mobile)
• Supports internal attachments (![[path/to/image.png]])
• Supports external links (![alt](https://...))
• Supports inline Markdown images (![](...))
• Supports wiki-style links (![[image-name]])

How it works

The preview (PreviewOverlay) is a position: fixed overlay with these design choices:

• pointer-events: none — the preview never intercepts mouse events, so the editor remains fully interactive
• Editor boundary — each reposition calculates the available space inside the editor area (getEditorBounds()) to avoid spilling into sidebars
• Adaptive sizing — images smaller than the window display at natural size; images larger than the editor area are scaled down to fit
• Zoom clamp — getMaxZoom() prevents zooming beyond the editor's dimensions, so the preview never overflows

demo

Sponsor