HoverGallery

Revele múltiplas imagens ao passar o mouse horizontalmente. Ideal para galerias de produtos.

Importação

import { HoverGallery } from 'asterui'

Exemplos

Galeria Básica

Passe o mouse horizontalmente para revelar diferentes imagens.

</>

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

Card de Produto

Perfeito para exibições de produtos 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

Duas Imagens

Comparação simples antes/depois ou frente/verso.

</>

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

Propriedade	Descrição	Tipo	Padrão
images	Array de URLs de imagem (2-10 imagens)	string[]	-
alts	Texto alternativo para cada imagem	string[]	-
className	Classes CSS adicionais	string	-

Notas

• Suporta até 10 imagens
• Primeira imagem é visível por padrão
• CSS puro - nenhum JavaScript necessário para o efeito hover
• Funciona melhor com imagens da mesma proporção de aspecto