20 CSS Image Hover Effects 01 / 20

CSS Image Hover Zoom In Card

The classic card micro-interaction where the image scales up inside its clipped container boundary without shifting the surrounding grid.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="ih-01">
  <div class="ih-01__grid">
    <div class="ih-01__card">
      <div class="ih-01__img-wrap">
        <div class="ih-01__img ih-01__img--1">
          <div class="ih-01__img-inner"><span class="ih-01__img-icon">🔭</span></div>
        </div>
      </div>
      <div class="ih-01__body">
        <p class="ih-01__cat">Explore</p>
        <p class="ih-01__title">Deep Space Observatory</p>
        <p class="ih-01__meta">12 min read · Cosmos</p>
      </div>
    </div>
    <div class="ih-01__card">
      <div class="ih-01__img-wrap">
        <div class="ih-01__img ih-01__img--2">
          <div class="ih-01__img-inner"><span class="ih-01__img-icon">🌿</span></div>
        </div>
      </div>
      <div class="ih-01__body">
        <p class="ih-01__cat">Nature</p>
        <p class="ih-01__title">Ancient Forest Canopy</p>
        <p class="ih-01__meta">8 min read · Biology</p>
      </div>
    </div>
    <div class="ih-01__card">
      <div class="ih-01__img-wrap">
        <div class="ih-01__img ih-01__img--3">
          <div class="ih-01__img-inner"><span class="ih-01__img-icon">💎</span></div>
        </div>
      </div>
      <div class="ih-01__body">
        <p class="ih-01__cat">Design</p>
        <p class="ih-01__title">Crystal Formations</p>
        <p class="ih-01__meta">5 min read · Art</p>
      </div>
    </div>
  </div>
</div>
.ih-01, .ih-01 *, .ih-01 *::before, .ih-01 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.ih-01 ::selection { background: #7c3aed; color: #fff; }

.ih-01 {
  --accent: #7c3aed;
  --accent2: #06b6d4;
  --bg: #0f0f13;
  --card-bg: #1a1a24;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --radius: 16px;
  --zoom: 1.12;
  --duration: 0.45s;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  padding: 40px 24px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ih-01__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 780px;
  width: 100%;
}

/* The key trick: overflow:hidden on card clips the zooming image */
.ih-01__card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
  cursor: pointer;
}

.ih-01__card:hover {
  box-shadow: 0 20px 60px rgba(124,58,237,0.25);
  border-color: rgba(124,58,237,0.35);
}

.ih-01__img-wrap {
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
}

/* The image itself scales — overflow:hidden on parent does the crop */
.ih-01__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration) var(--ease);
  display: block;
  background: linear-gradient(135deg, #1e1e2e, #2d1b69);
}

.ih-01__card:hover .ih-01__img {
  transform: scale(var(--zoom));
}

/* Decorative gradient placeholder images */
.ih-01__img--1 { background: linear-gradient(135deg, #1a0533 0%, #4c1d95 50%, #0891b2 100%); }
.ih-01__img--2 { background: linear-gradient(135deg, #0c1a2e 0%, #1e3a5f 50%, #065f46 100%); }
.ih-01__img--3 { background: linear-gradient(135deg, #1a0a1e 0%, #6b21a8 50%, #be185d 100%); }

.ih-01__img-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.ih-01__img-icon {
  font-size: 48px;
  opacity: 0.4;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.ih-01__card:hover .ih-01__img-icon {
  transform: scale(0.88);
  opacity: 0.25;
}

.ih-01__body {
  padding: 16px;
}

.ih-01__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 6px;
}

.ih-01__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.ih-01__meta {
  font-size: 12px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .ih-01__img,
  .ih-01__img-icon,
  .ih-01__card {
    transition: none;
  }
}

How this works

The technique pairs overflow: hidden on the card wrapper with a transform: scale() on the inner image element. Because the overflow is clipped at the card boundary, the zoom stays contained and never nudges neighbouring grid items. will-change: transform promotes the image to its own compositor layer so the scale runs entirely on the GPU.

A complementary box-shadow transition on the card itself adds perceived depth without triggering layout — shadows are composited independently. The cubic-bezier(0.25, 0.46, 0.45, 0.94) easing mirrors the "ease-out" feel of native iOS spring animations, giving the zoom a natural deceleration.

Customize

  • Change the zoom magnitude by editing --zoom: 1.12 — values between 1.05 and 1.2 cover most use cases without clipping content.
  • Extend the transition duration with --duration: 0.6s for editorial layouts or shorten to 0.25s for high-density product grids.
  • Apply a matching brightness(1.05) filter alongside the scale for a subtle light-table effect: filter: brightness(1.05).
  • Pair the zoom with a caption slide-up by adding a child element that uses transform: translateY() on the same :hover selector.
  • Use object-fit: cover on real <img> tags so portrait and landscape photos both fill the card uniformly regardless of source ratio.

Watch out for

  • Setting overflow: hidden on an ancestor above the card will also clip the box-shadow glow — keep the shadow and overflow on different elements.
  • Animating width/height instead of transform: scale forces layout recalculation on every frame and will cause jank on mid-range devices.
  • In Safari, combining border-radius with overflow: hidden and a transform can expose a rendering bug where corners briefly square off — add -webkit-mask-image: -webkit-radial-gradient(white, black) as a fix.

Browser support

ChromeSafariFirefoxEdge
51+ 9+ 36+ 51+

All properties used (transform, box-shadow, overflow) are baseline and require no prefixes in any modern browser.

More from 20 CSS Image Hover Effects

CSS Hover Reveal Text Over ImageE-Commerce Product Image Swap on HoverCSS Grid Image Blur Overlay Text HoverCSS Card Slide Up Caption on HoverCSS Grayscale to Color Image HoverCSS Image Color Overlay Tint on HoverNeumorphic Image Card Hover Effect CSSGlassmorphism Overlay on Image HoverCSS Glowing Neon Border Image HoverCSS Image Clip-Path Transition HoverCSS Shining Light Glare Image HoverCSS Image Split Transition Hover
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →