22 CSS Transition Effects 05 / 22

Image Zoom Hover Transition

Nine zoom techniques: standard, rotate-and-zoom, zoom-out, colour overlay, Ken Burns pan, 3D tilt, blur-on-zoom, desaturate and clip-path inset.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<h1>Image Zoom Hover Transitions</h1>
<p class="sub">9 CSS zoom effects — hover each image to see the transition</p>

<div class="grid-main" style="max-width:1100px;margin:0 auto">

  <div class="zoom-std">
    <div class="img-wrap pal1">
      <div class="img-fake pal1"><div class="img-icon">🏔️</div></div>
      <div class="technique-tag">Scale 1→1.4</div>
      <div class="img-overlay"><h3>Standard Zoom</h3><span>scale(1.4) ease</span></div>
    </div>
  </div>

  <div class="zoom-rot">
    <div class="img-wrap pal2">
      <div class="img-fake pal2"><div class="img-icon">🌺</div></div>
      <div class="technique-tag">Scale + Rotate</div>
      <div class="img-overlay"><h3>Rotate Zoom</h3><span>scale(1.35) rotate(5deg)</span></div>
    </div>
  </div>

  <div class="zoom-out">
    <div class="img-wrap pal3">
      <div class="img-fake pal3"><div class="img-icon">🦋</div></div>
      <div class="technique-tag">Zoom Out</div>
      <div class="img-overlay"><h3>Zoom Out</h3><span>Starts at 1.4, shrinks to 1</span></div>
    </div>
  </div>

  <div class="zoom-color">
    <div class="img-wrap pal4">
      <div class="img-fake pal4"><div class="img-icon">🌊</div></div>
      <div class="technique-tag">Colour Overlay</div>
      <div class="img-overlay"><h3>Colour Tint</h3><span>scale(1.35) + tint</span></div>
    </div>
  </div>

  <div class="zoom-pan">
    <div class="img-wrap pal5">
      <div class="img-fake pal5"><div class="img-icon">🌿</div></div>
      <div class="technique-tag">Pan Left</div>
      <div class="img-overlay"><h3>Ken Burns Pan</h3><span>scale(1.5) + translateX(-15%)</span></div>
    </div>
  </div>

  <div class="zoom-tilt">
    <div class="img-wrap pal6">
      <div class="img-fake pal6"><div class="img-icon">🌅</div></div>
      <div class="technique-tag">3D Tilt</div>
      <div class="img-overlay"><h3>Perspective Tilt</h3><span>rotateY(12deg) + scale(1.18)</span></div>
    </div>
  </div>

  <div class="zoom-blur">
    <div class="img-wrap pal7">
      <div class="img-fake pal7"><div class="img-icon">🌌</div></div>
      <div class="technique-tag">Blur Out</div>
      <div class="img-overlay"><h3>Blur on Zoom</h3><span>scale(1.3) + blur(5px)</span></div>
    </div>
  </div>

  <div class="zoom-sat">
    <div class="img-wrap pal8">
      <div class="img-fake pal8"><div class="img-icon">❄️</div></div>
      <div class="technique-tag">Desaturate</div>
      <div class="img-overlay"><h3>Greyscale Zoom</h3><span>scale(1.3) + saturate(0)</span></div>
    </div>
  </div>

  <div class="zoom-clip">
    <div class="img-wrap pal9">
      <div class="img-fake pal9"><div class="img-icon">🔥</div></div>
      <div class="technique-tag">Clip Inset</div>
      <div class="img-overlay"><h3>Clip Reveal</h3><span>scale(1.35) + clip 10%</span></div>
    </div>
  </div>

</div>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',sans-serif;background:#111116;color:#fff;padding:60px 24px}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;text-align:center;margin-bottom:8px;letter-spacing:-.03em}
.sub{text-align:center;color:#666;margin-bottom:56px;font-size:.95rem}
.label{font-size:.68rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#666;margin-bottom:8px;display:block}
.section-title{font-size:1.3rem;font-weight:700;margin-bottom:24px;color:#fff}

/* IMAGE PLACEHOLDER (colored gradient as image substitute) */
.img-wrap{overflow:hidden;position:relative;border-radius:12px}
.img-fake{width:100%;aspect-ratio:4/3;display:block;transition:transform .6s cubic-bezier(.25,0,.25,1);background:var(--bg)}

/* label overlay */
.img-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
  pointer-events:none}
.img-overlay h3{font-size:1rem;font-weight:700;color:#fff;line-height:1.2}
.img-overlay span{font-size:.75rem;color:rgba(255,255,255,.6);margin-top:3px}

/* 1 — Standard zoom (boosted 1.1 → 1.4 for clearly visible effect) */
.zoom-std .img-wrap:hover .img-fake{transform:scale(1.4)}

/* 2 — Zoom + rotate (boosted 1.12/2deg → 1.35/5deg) */
.zoom-rot .img-wrap:hover .img-fake{transform:scale(1.35) rotate(5deg)}

/* 3 — Zoom out on hover (boosted starting 1.12 → 1.4) */
.zoom-out .img-fake{transform:scale(1.4)}
.zoom-out .img-wrap:hover .img-fake{transform:scale(1)}

/* 4 — Zoom with colour overlay (boosted 1.1 → 1.35, overlay 0.45 → 0.55) */
.zoom-color .img-wrap::after{content:'';position:absolute;inset:0;background:rgba(129,140,248,.55);opacity:0;transition:opacity .5s}
.zoom-color .img-wrap:hover::after{opacity:1}
.zoom-color .img-wrap:hover .img-fake{transform:scale(1.35)}

/* 5 — Ken Burns pan (boosted 1.2/-8% → 1.5/-15% for dramatic pan) */
.zoom-pan .img-fake{transform:scale(1.5) translateX(0);transition:transform .8s cubic-bezier(.25,0,.25,1)}
.zoom-pan .img-wrap:hover .img-fake{transform:scale(1.5) translateX(-15%)}

/* 6 — Tilt 3D (boosted 1.06/6deg → 1.18/12deg) */
.zoom-tilt .img-wrap{perspective:800px}
.zoom-tilt .img-wrap:hover .img-fake{transform:scale(1.18) perspective(800px) rotateY(12deg)}

/* 7 — Blur to sharp (boosted 1.08/2px → 1.3/5px) */
.zoom-blur .img-fake{filter:blur(0);transition:transform .6s cubic-bezier(.25,0,.25,1),filter .6s}
.zoom-blur .img-wrap:hover .img-fake{transform:scale(1.3);filter:blur(5px)}

/* 8 — Desaturate on hover (boosted 1.08 → 1.3) */
.zoom-sat .img-fake{transition:transform .6s cubic-bezier(.25,0,.25,1),filter .6s}
.zoom-sat .img-wrap:hover .img-fake{transform:scale(1.3);filter:saturate(0) brightness(1.1)}

/* 9 — Clip zoom (boosted 1.1/6% → 1.35/10%) */
.zoom-clip .img-wrap{border-radius:0}
.zoom-clip .img-fake{clip-path:inset(0% round 0px);transition:transform .6s cubic-bezier(.25,0,.25,1),clip-path .6s cubic-bezier(.25,0,.25,1)}
.zoom-clip .img-wrap:hover .img-fake{transform:scale(1.35);clip-path:inset(10% round 16px)}

/* Grid layout */
.grid-main{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:0 auto}
@media(max-width:800px){.grid-main{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.grid-main{grid-template-columns:1fr}}

/* Color palettes for fake images */
.pal1{--bg:linear-gradient(135deg,#667eea,#764ba2)}
.pal2{--bg:linear-gradient(135deg,#f6d365,#fda085)}
.pal3{--bg:linear-gradient(135deg,#a18cd1,#fbc2eb)}
.pal4{--bg:linear-gradient(135deg,#4facfe,#00f2fe)}
.pal5{--bg:linear-gradient(135deg,#43e97b,#38f9d7)}
.pal6{--bg:linear-gradient(135deg,#fa709a,#fee140)}
.pal7{--bg:linear-gradient(135deg,#30cfd0,#330867)}
.pal8{--bg:linear-gradient(135deg,#a1c4fd,#c2e9fb)}
.pal9{--bg:linear-gradient(135deg,#fd7043,#e53935)}

.img-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3.5rem;pointer-events:none;transition:opacity .3s}
.img-wrap:hover .img-icon{opacity:.3}

.technique-tag{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.7);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:6px;backdrop-filter:blur(8px)}

@media (prefers-reduced-motion:reduce){.img-fake,.img-wrap::after{transition:none !important}}

More from 22 CSS Transition Effects

Glassmorphism Hover TransitionSlide-In Animation on ScrollFade In Fade Out TransitionLoading Skeleton TransitionModal Open Close TransitionPage Transition EffectRipple Effect on ClickNumber Counter AnimationCard Tilt 3D HoverStaggered List AnimationCursor Trail EffectMagnetic Button Effect
View the full collection →

Search CodeFronts

Loading…

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