Hover Preview

Interactive text image previews when hovering over target words.

hover-preview-tw

Built with React, TypeScript, and brought to life with Motion.

Customize

Enter Speed

0.20s

Exit Speed

0.15s

Max Rotation

12°

Max Offset

15px

Image Width

200px

Image Height

200px

Show Shadow

Target Padding

4px

Props

Name	Type	Default	Description
`content`	string	`""`	Text content with placeholders for targets (use {0}, {1}, etc.)
`targets`	HoverTarget[]	`[]`	Array of target configurations with text, imageUrl, linkUrl, and altText
`onTargetClick`	(target: HoverTarget, index: number) => void	`undefined`	Callback when a target is clicked. If not provided and linkUrl exists, opens link in new tab
`imagePosition`	"above" \| "below" \| "left" \| "right"	`"above"`	Position of the image relative to the target text
`enterSpeed`	number	`0.2`	Enter animation duration in seconds
`exitSpeed`	number	`0.15`	Exit animation duration in seconds
`maxRotation`	number	`12`	Maximum rotation angle for the image (in degrees)
`maxOffset`	number	`15`	Maximum offset for image movement (in pixels)
`imageWidth`	number	`200`	Image width in pixels
`imageHeight`	number	`200`	Image height in pixels
`className`	string	`""`	Additional CSS classes for the container
`targetClassName`	string	`""`	Additional CSS classes for target text
`targetPadding`	number	`4`	Padding around target text to expand hover area (in pixels)
`imageBorderRadius`	string	`"0.75rem"`	Image border radius (CSS value)
`showImageShadow`	boolean	`true`	Show shadow on image preview

contentstring

Text content with placeholders for targets (use {0}, {1}, etc.)

Default""

targetsHoverTarget[]

Array of target configurations with text, imageUrl, linkUrl, and altText

Default[]

onTargetClick(target: HoverTarget, index: number) => void

Callback when a target is clicked. If not provided and linkUrl exists, opens link in new tab

Defaultundefined

imagePosition"above" | "below" | "left" | "right"

Position of the image relative to the target text

Default"above"

enterSpeednumber

Enter animation duration in seconds

Default0.2

exitSpeednumber

Exit animation duration in seconds

Default0.15

maxRotationnumber

Maximum rotation angle for the image (in degrees)

Default12

maxOffsetnumber

Maximum offset for image movement (in pixels)

Default15

imageWidthnumber

Image width in pixels

Default200

imageHeightnumber

Image height in pixels

Default200

classNamestring

Additional CSS classes for the container

Default""

targetClassNamestring

Additional CSS classes for target text

Default""

targetPaddingnumber

Padding around target text to expand hover area (in pixels)

Default4

imageBorderRadiusstring

Image border radius (CSS value)

Default"0.75rem"

showImageShadowboolean

Show shadow on image preview

Defaulttrue