### hover-gallery

Hover Gallery is container of images. The first image is visible by default and when we hover it horizontally, other images show up. Hover Gallery is useful for product cards in ecommerce sites, portfolios or in image galleries. Hover Gallery can include up to 10 images.

[hover-gallery docs](https://daisyui.com/components/hover-gallery/)

#### Class names

- component: `hover-gallery`

#### Syntax

```html
<figure class="hover-gallery max-w-60">
	<img src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp" />
	<img src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp" />
	<img src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp" />
	<img src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp" />
</figure>
```

#### Rules

- hover-gallery can be a `<div>` or a `<figure>`
- hover-gallery can include up to 10 images
- hover-gallery needs a max width otherwise if fills the container width
- images must be same dimensions for a proper alignment