Web Designer Wall

Snippets Animation

Bootstrap 5 Product Grid with Hover Add to Cart

A product grid where each card lifts on hover, zooms the photo and reveals an add-to-cart button, with a save toggle and a live cart counter.

Bootstrap 5 No jQuery Aug 2020 2.8K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1100px">
    <div class="d-flex flex-wrap align-items-end justify-content-between gap-3 mb-4">
      <div>
        <span class="wdw-eyebrow">New arrivals</span>
        <h2 class="wdw-heading h2 mt-1 mb-0">Shop the collection</h2>
      </div>
      <div class="pl-cart wdw-card-sm px-3 py-2 d-flex align-items-center gap-2" role="status" aria-live="polite">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>
        <span class="small fw-semibold"><span id="plCount">0</span> items in cart</span>
      </div>
    </div>
    <div class="row g-3 g-lg-4">
      <div class="col-6 col-lg-3">
        <article class="pl-card wdw-card-sm h-100">
          <div class="pl-img">
            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=600&h=600&fit=crop" alt="Red Racing Sneakers" loading="lazy">
            <button type="button" class="pl-fav" aria-pressed="false" aria-label="Save Red Racing Sneakers"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg></button>
            <button type="button" class="btn btn-primary btn-sm rounded-pill pl-add" data-name="Red Racing Sneakers">Add to cart</button>
          </div>
          <div class="p-3">
            <div class="small wdw-muted">Footwear</div>
            <h3 class="h6 fw-bold mb-1">Red Racing Sneakers</h3>
            <div class="fw-bold text-primary">$89</div>
          </div>
        </article>
      </div>
      <div class="col-6 col-lg-3">
        <article class="pl-card wdw-card-sm h-100">
          <div class="pl-img">
            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&h=600&fit=crop" alt="Smart Watch" loading="lazy">
            <button type="button" class="pl-fav" aria-pressed="false" aria-label="Save Smart Watch"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg></button>
            <button type="button" class="btn btn-primary btn-sm rounded-pill pl-add" data-name="Smart Watch">Add to cart</button>
          </div>
          <div class="p-3">
            <div class="small wdw-muted">Wearables</div>
            <h3 class="h6 fw-bold mb-1">Smart Watch</h3>
            <div class="fw-bold text-primary">$120</div>
          </div>
        </article>
      </div>
      <div class="col-6 col-lg-3">
        <article class="pl-card wdw-card-sm h-100">
          <div class="pl-img">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=600&fit=crop" alt="Studio Headphones" loading="lazy">
            <button type="button" class="pl-fav" aria-pressed="false" aria-label="Save Studio Headphones"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg></button>
            <button type="button" class="btn btn-primary btn-sm rounded-pill pl-add" data-name="Studio Headphones">Add to cart</button>
          </div>
          <div class="p-3">
            <div class="small wdw-muted">Audio</div>
            <h3 class="h6 fw-bold mb-1">Studio Headphones</h3>
            <div class="fw-bold text-primary">$149</div>
          </div>
        </article>
      </div>
      <div class="col-6 col-lg-3">
        <article class="pl-card wdw-card-sm h-100">
          <div class="pl-img">
            <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=600&h=600&fit=crop" alt="Aviator Sunglasses" loading="lazy">
            <button type="button" class="pl-fav" aria-pressed="false" aria-label="Save Aviator Sunglasses"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg></button>
            <button type="button" class="btn btn-primary btn-sm rounded-pill pl-add" data-name="Aviator Sunglasses">Add to cart</button>
          </div>
          <div class="p-3">
            <div class="small wdw-muted">Accessories</div>
            <h3 class="h6 fw-bold mb-1">Aviator Sunglasses</h3>
            <div class="fw-bold text-primary">$64</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