Displays text with two images that reveal on hover. Uses pure CSS for animation with no JavaScript required.

Preview/Playground

Created by

Barsan

Hover me

Astro

import RevealImage from '@astroanimate/core/RevealImage';

<RevealImage
  text="Hover me"
  image1="/path/to/image1.jpg"
  image2="/path/to/image2.jpg"
  alt="Description"
/>

Installation

bash

npm install @astroanimate/core

Usage

import RevealImage from '@astroanimate/core/RevealImage';

<RevealImage
  text="Hover me"
  image1="/path/to/image1.jpg"
  image2="/path/to/image2.jpg"
  alt="Description"
/>

On hover, images expand from small thumbnails to larger previews, with one image slightly rotated and offset for a layered effect.

Props

Prop	Type	Default	Description
`text`	`string`	`-`	Text to display (required)
`image1`	`string`	`-`	First image source URL (required)
`image2`	`string`	`-`	Second image source URL (required)
`alt`	`string`	`""`	Alt text applied to both images
`class`	`string`	`-`	Optional class applied to root element

Behavior

Text is always visible and fades slightly on hover
Two images are positioned absolutely near the text
On hover:
- Images scale from 0 to visible size
- Opacity transitions from 0 to 1
- One image shifts position and rotates slightly for depth effect
Images expand within a constrained container, not full viewport size
No JavaScript is used; all behavior is handled via CSS

Use When

Creating hover-based visual highlights for text
Adding layered image reveal effects
Building portfolio or showcase sections with subtle interaction

Avoid When

Touch-only environments (hover interaction is not available)
Content must always be visible without interaction
Complex animation sequencing or programmatic control is required

Accessibility

Respects prefers-reduced-motion :
- Disables transitions
- Removes text fade effect
- Shows images without scaling animation
Includes alt attributes for images (same value applied to both)
Images are decorative unless meaningful alt text is provided