Web Designer Wall

Snippets Animation

Bootstrap 5 Image Cards with Hover Reveal

A responsive grid of destination image cards that lift and zoom on hover to reveal a short description and a call-to-action button.

Bootstrap 5 No jQuery Feb 2020 3.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1140px">
    <div class="text-center mb-5">
      <span class="wdw-eyebrow mb-2">Destinations</span>
      <h2 class="wdw-heading display-6 mb-0">Where to next?</h2>
    </div>
    <div class="row g-3 g-lg-4">
      <div class="col-sm-6 col-lg-3">
        <article class="ch-card position-relative overflow-hidden rounded-4 h-100">
          <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=700&q=75" alt="Snow-capped mountain range" class="ch-img" loading="lazy">
          <div class="ch-scrim"></div>
          <span class="badge ch-count position-absolute top-0 start-0 m-3 rounded-pill">12 trips</span>
          <div class="ch-body position-absolute bottom-0 start-0 end-0 p-4 text-white">
            <h3 class="h5 fw-bold mb-0 ch-title">Mountain View</h3>
            <div class="ch-reveal">
              <div>
                <p class="small mb-3 mt-2 opacity-75">Gorgeous alpine trips with ridge-line views and quiet huts.</p>
                <a href="#" class="btn btn-light btn-sm rounded-pill px-3 stretched-link">View trips
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
              </div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-lg-3">
        <article class="ch-card position-relative overflow-hidden rounded-4 h-100">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=700&q=75" alt="Palm trees on a sunny beach" class="ch-img" loading="lazy">
          <div class="ch-scrim"></div>
          <span class="badge ch-count position-absolute top-0 start-0 m-3 rounded-pill">24 trips</span>
          <div class="ch-body position-absolute bottom-0 start-0 end-0 p-4 text-white">
            <h3 class="h5 fw-bold mb-0 ch-title">To the Beach</h3>
            <div class="ch-reveal">
              <div>
                <p class="small mb-3 mt-2 opacity-75">Plan your next coastal escape with these fabulous shorelines.</p>
                <a href="#" class="btn btn-light btn-sm rounded-pill px-3 stretched-link">View trips
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
              </div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-lg-3">
        <article class="ch-card position-relative overflow-hidden rounded-4 h-100">
          <img src="https://images.unsplash.com/photo-1509316785289-025f5b846b35?auto=format&fit=crop&w=700&q=75" alt="Sand dunes at sunset" class="ch-img" loading="lazy">
          <div class="ch-scrim"></div>
          <span class="badge ch-count position-absolute top-0 start-0 m-3 rounded-pill">9 trips</span>
          <div class="ch-body position-absolute bottom-0 start-0 end-0 p-4 text-white">
            <h3 class="h5 fw-bold mb-0 ch-title">Desert Destinations</h3>
            <div class="ch-reveal">
              <div>
                <p class="small mb-3 mt-2 opacity-75">The dunes and open skies you have always dreamed of.</p>
                <a href="#" class="btn btn-light btn-sm rounded-pill px-3 stretched-link">Book now
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
              </div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-sm-6 col-lg-3">
        <article class="ch-card position-relative overflow-hidden rounded-4 h-100">
          <img src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?auto=format&fit=crop&w=700&q=75" alt="Milky Way over a starry sky" class="ch-img" loading="lazy">
          <div class="ch-scrim"></div>
          <span class="badge ch-count position-absolute top-0 start-0 m-3 rounded-pill">6 trips</span>
          <div class="ch-body position-absolute bottom-0 start-0 end-0 p-4 text-white">
            <h3 class="h5 fw-bold mb-0 ch-title">Explore the Galaxy</h3>
            <div class="ch-reveal">
              <div>
                <p class="small mb-3 mt-2 opacity-75">Dark-sky stargazing far from the city lights.</p>
                <a href="#" class="btn btn-light btn-sm rounded-pill px-3 stretched-link">Book now
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                </a>
              </div>
            </div>
          </div>
        </article>
      </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