HoverGallery

Revela múltiples imágenes al pasar el ratón horizontalmente. Ideal para galerías de productos.

Importar

import { HoverGallery } from 'asterui'

Ejemplos

Galería Básica

Pasa el ratón horizontalmente para revelar diferentes imágenes.

</>

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

Tarjeta de Producto

Perfecto para displays de productos de e-commerce.

</>

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

Dos Imágenes

Comparación simple antes/después o frontal/trasera.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
images	Array de URLs de imagen (2-10 imágenes)	string[]	-
alts	Texto alt para cada imagen	string[]	-
className	Clases CSS adicionales	string	-

Notas

• Soporta hasta 10 imágenes
• La primera imagen es visible por defecto
• CSS puro - no se requiere JavaScript para el efecto hover
• Funciona mejor con imágenes de la misma relación de aspecto