html|css|javascript 16 views

Stylish Card Zoom Effect on Hover

A modern card zoom effect that elevates user interaction on hover. Great for portfolios and product showcases.

By TWC Team • Feb 14, 2026

Code

<!--
  Stylish Card Zoom Effect on Hover
  Drop this snippet into any page to create accessible, responsive cards with a smooth hover/keyboard focus zoom.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Stylish Card Zoom Effect on Hover</title>
  <style>
    :root { color-scheme: light; }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: #0b1020;
      color: #e9ecf1;
      display: grid;
      place-items: center;
      min-height: 100vh;
      padding: 24px;
    }

    /* Layout wrapper (optional) */
    .card-grid {
      width: min(980px, 100%);
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    /* Card styles (matches required behavior; adds accessibility + motion preferences) */
    .card {
      width: 300px;
      max-width: 100%;
      overflow: hidden;
      border-radius: 8px;
      background: #111833;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      transform: translateZ(0); /* Hint GPU compositing for smoother transforms */
      cursor: pointer;
      outline: none;
    }
    .card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
      transform: translateZ(0);
    }
    .card h3 { margin: 14px 14px 6px; font-size: 1.05rem; }
    .card p { margin: 0 14px 14px; color: rgba(233,236,241,0.82); }

    .card:hover,
    .card:focus-visible {
      transform: scale(1.05);
      box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    }
    .card:hover img,
    .card:focus-visible img {
      transform: scale(1.1);
    }

    /* Respect reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {
      .card, .card img { transition: none; }
      .card:hover, .card:focus-visible { transform: none; }
      .card:hover img, .card:focus-visible img { transform: none; }
    }
  </style>
</head>
<body>
  <main class="card-grid" aria-label="Card hover effect examples">
    <div class="card" role="button" tabindex="0" data-href="#example">
      <img src="https://images.unsplash.com/photo-1526481280695-3c687fd643ed?auto=format&fit=crop&w=1200&q=70" alt="Sample" />
      <h3>Card Title</h3>
      <p>Some description here.</p>
    </div>
  </main>

  <script>
    /**
     * Enables keyboard-accessible card navigation.
     * Uses event delegation for performance (single listener for all cards).
     */
    document.addEventListener("click", (event) => {
      const card = event.target.closest(".card");
      if (!card) return;
      const href = card.dataset.href;
      if (href) window.location.assign(href);
    });

    document.addEventListener("keydown", (event) => {
      if (event.key !== "Enter" && event.key !== " ") return;
      const card = event.target.closest?.(".card");
      if (!card) return;
      event.preventDefault(); // Prevent page scroll on Space
      const href = card.dataset.href;
      if (href) window.location.assign(href);
    });

    // Example usage: duplicate .card elements in .card-grid, setting data-href per card as needed.
  </script>
</body>
</html>
Back to Snippets