Image
VERSION2.3.1
LICENSEMIT
CONFIG4 Options
Displays a custom image or thumbnail as the cursor hover state using a hover target's `data-supermouse-img` attribute.
Installation
pnpm add @supermousejs/imageUsage
import { Image } from '@supermousejs/image';
app.use(Image({ className: 'supermouse-image', offset: [0, 30] }));
// Hover target markup
<a href="/gallery" data-supermouse-img="/images/gallery-thumb.jpg">Open gallery</a>Configuration
| Option | Type | Default | Description |
|---|---|---|---|
| className | string | 'supermouse-image' | CSS class added to container. |
| offset | [number, number] | [0, 30] | X/Y offset from cursor. |
| duration | number | 200 | Fade transition time in ms. |
| smoothness | number | 1 | Lerp factor for image lag. |