Hover gallery
A set of images that shows one at a time and switches as the pointer moves across it.
Overview
A hover gallery holds several images in one box. The first image shows by default. Each item is an invisible column, and the image of the column under the pointer covers the whole gallery. It works without JavaScript.
Basic example
Wrap each image in a .hover-gallery-item and put the items in a .hover-gallery. Use as many items as you need.
<div class="hover-gallery rounded w-33">
<div class="hover-gallery-item">
<img src="/static/products/backpack-1.jpg" alt="Black leather backpack, front view" />
</div>
<div class="hover-gallery-item">
<img src="/static/products/backpack-2.jpg" alt="Black leather backpack, view from the front left" />
</div>
<div class="hover-gallery-item">
<img src="/static/products/backpack-3.jpg" alt="Black leather backpack, side view" />
</div>
<div class="hover-gallery-item">
<img src="/static/products/backpack-4.jpg" alt="Black leather backpack, back view" />
</div>
</div>Indicators
Add .hover-gallery-indicators to show a bar for each image. The bar of the image on display is lit.
<div class="hover-gallery hover-gallery-indicators rounded w-33">
<div class="hover-gallery-item">
<img src="/static/products/backpack-1.jpg" alt="Black leather backpack, front view" />
</div>
<div class="hover-gallery-item">
<img src="/static/products/backpack-2.jpg" alt="Black leather backpack, view from the front left" />
</div>
<div class="hover-gallery-item">
<img src="/static/products/backpack-3.jpg" alt="Black leather backpack, side view" />
</div>
<div class="hover-gallery-item">
<img src="/static/products/backpack-4.jpg" alt="Black leather backpack, back view" />
</div>
</div>The bars are white and sit on a soft dark gradient, so they stay visible on light and dark photos. Set --tblr-hover-gallery-indicator-scrim-bg to none to remove the gradient, and --tblr-hover-gallery-indicator-color to change the bars.
Aspect ratio
The gallery is a square by default and the images are cropped to fill it. Set --tblr-hover-gallery-aspect-ratio to change the shape.
<div class="hover-gallery hover-gallery-indicators rounded w-50" style="--tblr-hover-gallery-aspect-ratio: 16 / 9">
<div class="hover-gallery-item">
<img src="/static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg" alt="Blue sofa with pillows in a living room" />
</div>
<div class="hover-gallery-item">
<img src="/static/photos/city-lights-reflected-in-the-water-at-night.jpg" alt="City lights reflected in the water at night" />
</div>
<div class="hover-gallery-item">
<img src="/static/photos/colorful-exotic-flowers-and-greenery.jpg" alt="Colorful exotic flowers and greenery" />
</div>
</div>In a card
Add .card-img-top to use the gallery in place of the card image.
Steel watch
<div class="card w-33">
<div class="hover-gallery hover-gallery-indicators card-img-top">
<div class="hover-gallery-item">
<img src="/static/products/watch-1.jpg" alt="Steel watch with a black dial, front view" />
</div>
<div class="hover-gallery-item">
<img src="/static/products/watch-2.jpg" alt="Steel watch, view from the front left" />
</div>
<div class="hover-gallery-item">
<img src="/static/products/watch-4.jpg" alt="Steel watch, back view" />
</div>
</div>
<div class="card-body">
<h3 class="card-title">Steel watch</h3>
<div class="text-secondary">$249</div>
</div>
</div>Touch devices
On devices without hover, the gallery becomes a horizontal strip. Users swipe to see the next image, and each image snaps into place. The indicators are hidden there.
Accessibility
- Give every image an
alttext that says what this photo shows, not only the product name. - Keyboard users see only the first image. Do not put information in the other images that is missing elsewhere on the page.
- When the gallery sits inside a link, the whole gallery leads to one place. Do not link single images to different pages.
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
hover-gallery | component | Container element with a fixed aspect ratio |
hover-gallery-item | part | Wraps one image and makes one hover column |
hover-gallery-indicators | modifier | Adds a bar for each item at the bottom edge and lights the one on display |
CSS
Variables
The component uses local CSS variables
on .hover-gallery for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/ui/_hover-gallery.scss.
--hover-gallery-aspect-ratio: #{$hover-gallery-aspect-ratio};
--hover-gallery-indicator-size: #{$hover-gallery-indicator-size};
--hover-gallery-indicator-gap: #{$hover-gallery-indicator-gap};
--hover-gallery-indicator-padding: #{$hover-gallery-indicator-padding};
--hover-gallery-indicator-color: #{$hover-gallery-indicator-color};
--hover-gallery-indicator-scrim-height: #{$hover-gallery-indicator-scrim-height};
--hover-gallery-indicator-scrim-bg: #{$hover-gallery-indicator-scrim-bg};
--hover-gallery-indicator-inactive-opacity: #{$hover-gallery-indicator-inactive-opacity};Sass variables
Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.
$hover-gallery-aspect-ratio: 1;
$hover-gallery-indicator-size: 2px;
$hover-gallery-indicator-gap: 0.25rem;
$hover-gallery-indicator-padding: 0.5rem;
$hover-gallery-indicator-color: $white;
$hover-gallery-indicator-scrim-height: 40%;
$hover-gallery-indicator-scrim-bg: linear-gradient(to top, rgba($black, 0.32), rgba($black, 0.2) 20%, rgba($black, 0.1) 45%, rgba($black, 0.03) 75%, transparent);
$hover-gallery-indicator-inactive-opacity: 0.5;
