Hover Preview

Interactive text image previews when hovering over target words.

hover-preview-tw

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

Image Position

Enter Speed0.2s

Exit Speed0.15s

Target Padding4px

Max Rotation12°

Max Offset15px

Image Width200px

Image Height200px

Border Radius

Show Shadow

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