baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions
benjaminpalko/.opencode/skills/daisyui/components/hover-gallery.md
Benjamin Palko a6d4064af8 format project
2026-08-11 16:25:07 -04:00

1,003 B
Raw Blame History

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

Class names

  • component: hover-gallery

Syntax

<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