Web Designer Wall

Snippets Animation

Bootstrap 5 Thumbnail Grid with Hover Effects

A responsive three-column thumbnail grid where each photo zooms and reveals its title and caption on hover or focus.

Bootstrap 5 No jQuery Jan 2020 2.6K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1040px">
    <div class="text-center mb-4 mb-lg-5">
      <span class="wdw-eyebrow">Portfolio</span>
      <h2 class="wdw-heading display-6 mt-1 mb-2">Selected work</h2>
      <p class="wdw-muted mb-0">Hover or focus a thumbnail to see the details.</p>
    </div>
    <div class="row g-3 g-lg-4">
      <div class="col-12 col-sm-6 col-lg-4">
        <a href="#" class="th-card d-block position-relative overflow-hidden rounded-4 text-decoration-none">
          <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&h=600&q=70" alt="Mountain light" width="800" height="600" loading="lazy">
          <span class="th-badge badge rounded-pill">Landscape</span>
          <span class="th-info">
            <span class="th-title">Mountain light</span>
            <span class="th-desc">Dawn over the valley</span>
          </span>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-4">
        <a href="#" class="th-card d-block position-relative overflow-hidden rounded-4 text-decoration-none">
          <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=800&h=600&q=70" alt="Misty ridge" width="800" height="600" loading="lazy">
          <span class="th-badge badge rounded-pill">Landscape</span>
          <span class="th-info">
            <span class="th-title">Misty ridge</span>
            <span class="th-desc">Fog rolling through pines</span>
          </span>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-4">
        <a href="#" class="th-card d-block position-relative overflow-hidden rounded-4 text-decoration-none">
          <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=800&h=600&q=70" alt="Forest path" width="800" height="600" loading="lazy">
          <span class="th-badge badge rounded-pill">Nature</span>
          <span class="th-info">
            <span class="th-title">Forest path</span>
            <span class="th-desc">A quiet trail in summer</span>
          </span>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-4">
        <a href="#" class="th-card d-block position-relative overflow-hidden rounded-4 text-decoration-none">
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=800&h=600&q=70" alt="Lakeside" width="800" height="600" loading="lazy">
          <span class="th-badge badge rounded-pill">Travel</span>
          <span class="th-info">
            <span class="th-title">Lakeside</span>
            <span class="th-desc">Still water at golden hour</span>
          </span>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-4">
        <a href="#" class="th-card d-block position-relative overflow-hidden rounded-4 text-decoration-none">
          <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=800&h=600&q=70" alt="Green hills" width="800" height="600" loading="lazy">
          <span class="th-badge badge rounded-pill">Landscape</span>
          <span class="th-info">
            <span class="th-title">Green hills</span>
            <span class="th-desc">Layers of morning haze</span>
          </span>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-lg-4">
        <a href="#" class="th-card d-block position-relative overflow-hidden rounded-4 text-decoration-none">
          <img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?auto=format&fit=crop&w=800&h=600&q=70" alt="Open fields" width="800" height="600" loading="lazy">
          <span class="th-badge badge rounded-pill">Nature</span>
          <span class="th-info">
            <span class="th-title">Open fields</span>
            <span class="th-desc">Wide skies, long shadows</span>
          </span>
        </a>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets