20 CSS Image Hover Effects01 / 20

Pure CSSMIT licensed

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.

Published

Live Demo
Try it

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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Image Hover Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Image Hover Zoom In Card
Source: https://codefronts.com/motion/css-image-hover-effects/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.
## HTML
```html
<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>
```
## CSS
```css
.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.

Make it yours

  • 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.

Gotchas — read before shipping

  • 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.

Techniques used in this demo

aspect-ratioMDN ↗grid-templateMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →