Hover Preview

Words that show an image preview on hover

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

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