The Hover Gallery component displays a container of images where the first image is visible by default. Hovering horizontally over the gallery reveals the other images. DaisyUI supports up to 10 images.
Common use cases include product cards on e-commerce sites, portfolios, and image galleries.
Pass images via the with_image slot. Hover left and right over the
gallery to reveal each image.
Combine daisy_hover_gallery with daisy_card by placing it inside
card.with_top_figure. This replicates the DaisyUI "Hover Gallery in a
card" demo.
A card with a hover gallery as the figure.
A card with a hover gallery as the figure.
= daisy_card(css: "card-sm bg-base-200 max-w-60 shadow") do |card|
- card.with_top_figure do
= daisy_hover_gallery do |gallery|
- gallery.with_image(src: image_path("landscapes/beach.jpg"), alt: "Beach")
- gallery.with_image(src: image_path("landscapes/desert.jpg"), alt: "Desert")
- gallery.with_image(src: image_path("landscapes/forest.jpg"), alt: "Forest")
- card.with_title { "Gallery Card" }
%p A card with a hover gallery as the figure.
Use the srcs: convenience parameter to pass an array of image URLs
without a block. Useful for quick, uniform galleries.
When neither with_image slots nor srcs: are provided, any block
content is rendered inside the figure. This allows full control over
the inner markup.
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.