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

Tweak the props live

Position & Animation

Image Position

Enter Speed0.2s

Exit Speed0.15s

Max Rotation12°

Max Offset15px

Image Settings

Image Width200px

Image Height200px

Border Radius

Show Shadow

Target Settings

Target Padding4px

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

Default:undefined

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

Position of the image relative to the target text

Default:"above"

enterSpeednumber

Enter animation duration in seconds

Default:0.2

exitSpeednumber

Exit animation duration in seconds

Default:0.15

maxRotationnumber

Maximum rotation angle for the image (in degrees)

Default:12

maxOffsetnumber

Maximum offset for image movement (in pixels)

Default:15

imageWidthnumber

Image width in pixels

Default:200

imageHeightnumber

Image height in pixels

Default:200

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)

Default:4

imageBorderRadiusstring

Image border radius (CSS value)

Default:"0.75rem"

showImageShadowboolean

Show shadow on image preview

Default:true