HoverGallery

Reveal multiple images by hovering horizontally. Ideal for product galleries.

Import

import { HoverGallery } from 'asterui'

Examples

Basic Gallery

Hover horizontally to reveal different images.

</>

import { HoverGallery } from 'asterui'

function App() {
  const images = [
    'https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp',
    'https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp',
    'https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp',
    'https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp',
  ]
  
  return (
      <HoverGallery
        images={images}
        className="max-w-60 rounded-lg"
      />
    )
}

export default App

Product Card

Perfect for e-commerce product displays.

</>

Product Name

Hover over the image to see more angles

$49.99

import { HoverGallery, Card } from 'asterui'

function App() {
  const images = [
    'https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp',
    'https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp',
    'https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp',
    'https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp',
  ]
  
  return (
      <Card
        className="max-w-60 shadow-xl"
        title="Product Name"
        cover={<HoverGallery images={images} />}
      >
        <p>Hover over the image to see more angles</p>
        <p className="text-lg font-bold">$49.99</p>
      </Card>
    )
}

export default App

Two Images

Simple before/after or front/back comparison.

</>

import { HoverGallery } from 'asterui'

function App() {
  return (
      <HoverGallery
        images={[
          'https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp',
          'https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp',
        ]}
        alts={['Front view', 'Side view']}
        className="max-w-60 rounded-lg"
      />
    )
}

export default App

API

HoverGallery

Property	Description	Type	Default
images	Array of image URLs (2-10 images)	string[]	-
alts	Alt text for each image	string[]	-
className	Additional CSS classes	string	-

Notes

• Supports up to 10 images
• First image is visible by default
• Pure CSS - no JavaScript required for the hover effect
• Works best with images of the same aspect ratio