Hover Gallery
Hover Gallery is container of images. The first image is visible be default and when we hover it horizontally, other images show up. Hover Gallery is useful for product cards in ecommerce sites, portfoilios or in image galleries. Hover Gallery can include up to 10 images.
| Class name | Type | |
|---|---|---|
| hover-gallery | Component | Container <div> or <figure> that includes images |
How it works
The first image is visible by default, the other image will create invisible columns and hovering each column, reveals that image. For example, here we have 4 images. Try hovering on each column to see 2nd, 3rd and 4th image.
2
3
4
Move your mouse on the image horizontally
<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>
<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>
<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>
<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>daisyUI Hat $25
High Quality classic cap hat with stitch logo
<div class="$$card $$card-sm bg-base-200 max-w-60 shadow"> <figure class="$$hover-gallery"> <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> <div class="$$card-body"> <h2 class="$$card-title flex justify-between"> daisyUI Hat <span class="font-normal">$25</span> </h2> <p>High Quality classic cap hat with stitch logo</p> </div> </div>
<div class="$$card $$card-sm bg-base-200 max-w-60 shadow">
<figure class="$$hover-gallery">
<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>
<div class="$$card-body">
<h2 class="$$card-title flex justify-between">
daisyUI Hat
<span class="font-normal">$25</span>
</h2>
<p>High Quality classic cap hat with stitch logo</p>
</div>
</div>
<div class="$$card $$card-sm bg-base-200 max-w-60 shadow">
<figure class="$$hover-gallery">
<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>
<div class="$$card-body">
<h2 class="$$card-title flex justify-between">
daisyUI Hat
<span class="font-normal">$25</span>
</h2>
<p>High Quality classic cap hat with stitch logo</p>
</div>
</div>
<div class="$$card $$card-sm bg-base-200 max-w-60 shadow">
<figure class="$$hover-gallery">
<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>
<div class="$$card-body">
<h2 class="$$card-title flex justify-between">
daisyUI Hat
<span class="font-normal">$25</span>
</h2>
<p>High Quality classic cap hat with stitch logo</p>
</div>
</div>Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
