Hover Gallery

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">
  
  
  
  
</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