GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS Image Hover Effects — One Line, Copy-Paste

· Godrich · 9 items · 16 min read

FeedbackSCSSCSS onlyHoverLanding page

These nine css image hover effects each run on a single wrapped image and swap in a zoom, a color shift, or a sliding caption the instant a cursor lands, using

Zoom in01 image-hover-zoom-in Grayscale to color02 image-hover-grayscale-to-color Caption slide up03 image-hover-caption-slide Overlay fade04 image-hover-overlay-fade 3D tilt05 image-hover-tilt-3d Brightness sweep06 image-hover-brightness-sweep Clip-path circle zoom07 image-hover-clip-circle-zoom Two-image cross-fade08 image-hover-cross-fade Shake09 image-hover-shake

Auto-plays · click a tile to jump to its section · all nine in one zip

The nine below move from the plainest single-property change to the most layered one. 01 through 04 touch just one thing — scale, filter, position, or opacity — on hover alone. 05 and 06 add a second dimension to the same css image transition effects: a tilted perspective and a moving gradient band. 07 through 09 are the idea-form entries: a clip-path reveal, a two-image swap, and a startle shake. Watch the grid above loop through all nine hover states on its own: each thumbnail sits inside a fixed, non-scrollable iframe with nothing to click, so it plays that state automatically rather than waiting on a pointer that iframe can never receive. Every "photo" in the demos below is a two-tone CSS gradient landscape with a sun and a hill layered on top, not an image file. Dropping in a real <img> or a photographic background keeps every rule working unchanged. Every one of the nine also mirrors its :hover state onto :focus-visible and :active, and each carries an @media (hover: none) fallback that fires the same end state on a tap. As a result, keyboard focus and touch screens land on the identical effect a mouse would trigger. When the surface behind the photo should move on its own, that's the CSS background animations, and when a figure beside the photo has to climb, the CSS number counter animations take that job.

01Zoom in

How the css image hover effect scale is set

Overflow is clipped on the wrapper while only the inner image scales up on :hover, so the frame stays a fixed size and just the photo appears to zoom closer.

Where it fits

It suits product thumbnails and portfolio tiles where the card edge and shadow need to hold still while the picture does the moving.

Zoom in
Open in a new tab

01 · Zoom in — Measured area 3.017% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

transform:scaleoverflow:hidden0.3초
.photo {
  overflow: hidden;
}
.photo__pic {
  transform: scale(1);
  transition: transform $duration $easing;
}

.photo:hover .photo__pic,
.photo:focus-visible .photo__pic,
.photo:active .photo__pic {
  transform: scale(1.14);
}

@media (hover: none) {
  .photo:active .photo__pic { transform: scale(1.14); }
}

02Grayscale to color

How it works

A grayscale(1) filter strips the photo's color at rest, then transitions to grayscale(0) on hover so the original hue fades back in over the wrapper's declared duration.

Where it fits

Team photo grids and gallery filter cards use it to mark which tile is currently in focus without any extra markup.

Grayscale to color
Open in a new tab

02 · Grayscale to color — Measured area 12.272% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

filter:grayscaletransition0.4초
.photo__pic {
  filter: grayscale(1);
  transition: filter $duration $easing;
}

.photo:hover .photo__pic,
.photo:focus-visible .photo__pic,
.photo:active .photo__pic {
  filter: grayscale(0);
}

@media (hover: none) {
  .photo:active .photo__pic { filter: grayscale(0); }
}

03Caption slide up

How it works

A caption block sits translated fully out of view below the photo and slides to translateY(0) on hover, revealing a title and description that were never visible until then.

Where it fits

Blog card lists and magazine-style grids use it so the caption never crowds the image at rest.

Caption slide up
Open in a new tab

03 · Caption slide up — Measured area 6.603% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateYoverflow:hidden0.25초
.photo__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: transform $duration $easing;
}

.photo:hover .photo__cap,
.photo:focus-visible .photo__cap,
.photo:active .photo__cap {
  transform: translateY(0);
}

04Overlay fade

How it works

A tinted layer positioned over the whole photo sits at opacity 0 until hover pushes it to 1, then fades back out the moment the cursor leaves.

Where it fits

Hero background photos and category cover images use the same trick to drop a readable label over busy artwork only when someone is actually looking at that tile.

Overlay fade
Open in a new tab

04 · Overlay fade — Measured area 13.208% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

opacity:hover/:focus-visible0.3초
.photo__overlay {
  position: absolute;
  inset: 0;
  background: rgba($color, .82);
  opacity: 0;
  transition: opacity $duration $easing;
}

.photo:hover .photo__overlay,
.photo:focus-visible .photo__overlay,
.photo:active .photo__overlay {
  opacity: 1;
}

053D tilt

How it works

Inside a parent carrying perspective, the photo itself tilts on rotateX and rotateY while lifting slightly on the Y axis, so the card reads as a physical object rather than a flat rectangle.

Where it fits

Product showcase cards and certificate or badge images benefit most, since a framed object looks right in three dimensions where a flat photo usually doesn't.

3D tilt
Open in a new tab

05 · 3D tilt — Measured area 5.519% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

perspectiverotateX/rotateYtransform-style
.frame {
  perspective: 700px;
}
.photo {
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0);
  transition: transform $duration $easing;
}

.photo:hover,
.photo:focus-visible,
.photo:active {
  transform: rotateX(-9deg) rotateY(11deg) translateY(-4px);
}

06Brightness sweep

How it works

A diagonal linear-gradient band sits off-screen at rest and translates across the full width of the photo on hover, mimicking a beam of light passing once over a glossy surface.

Where it fits

Premium product cards and badge-highlight images use the sweep as a one-shot flourish rather than a toggled state.

Brightness sweep
Open in a new tab

06 · Brightness sweep — Measured area 12.756% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

linear-gradienttransform: translateX0.6초
.photo__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba($subject-cream, .65) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

.photo:hover .photo__sweep,
.photo:focus-visible .photo__sweep,
.photo:active .photo__sweep {
  transform: translateX(120%);
  transition: transform $duration $easing;
}

07Clip-path circle zoom

How it works

clip-path:circle() starts at a 0% radius and grows to 150% on hover, so a circular window expands out from the center until it covers the whole photo sitting underneath a dimmer base layer.

Where it fits

Event teaser images and spotlight-reveal cards use the growing circle to hide most of the picture until someone actually commits to looking.

Clip-path circle zoom
Open in a new tab

07 · Clip-path circle zoom — Measured area 12.927% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

clip-path:circle()반지름 확장0.5초
.photo__pic {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path $duration $easing;
}

.photo:hover .photo__pic,
.photo:focus-visible .photo__pic,
.photo:active .photo__pic {
  clip-path: circle(150% at 50% 50%);
}

08Two-image cross-fade

How it works

Two photos are stacked in the exact same spot with position:absolute, and the second transitions from opacity 0 to 1 on hover, replacing the scene shown without either image ever moving.

Where it fits

Before/after product shots and color-option previews rely on the swap landing in place rather than sliding, since a moving comparison is harder to read at a glance.

Two-image cross-fade
Open in a new tab

08 · Two-image cross-fade — Measured area 14.624% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

opacity 교차position:absolute0.4초
.photo__b {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity $duration $easing;
}

.photo:hover .photo__b,
.photo:focus-visible .photo__b,
.photo:active .photo__b {
  opacity: 1;
}

09Shake

How it works

A short @keyframes animation nudges the photo left and right by a handful of pixels in quick, uneven steps that settle back to translateX(0) before the animation ends.

Where it fits

It fits product images carrying a limited-sale badge or any banner photo that needs to interrupt a scrolling glance rather than just sit there looking good.

Shake
Open in a new tab

09 · Shake — Measured area 3.646% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

@keyframestranslateX0.4초
.photo:hover .photo__pic,
.photo:focus-visible .photo__pic,
.photo:active .photo__pic {
  animation: shake $duration $easing;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}

Where it breaks — the traps

One of these nine borrows a keyword from a different corner of CSS and it doesn't survive the trip. radial-gradient()'s farthest-corner sizing keyword measures from a gradient's center to the box's furthest corner.

Borrowing a gradient keyword

It's tempting to reach for that same word inside item 07's clip-path: circle() once 150% overshoots badly on a very wide or very tall card. But circle()'s shape-radius argument only accepts a length, a percentage, closest-side, or farthest-side — MDN's basic-shape circle() reference lists exactly those four and nothing that reads "corner."

Why the whole rule drops

So clip-path: circle(farthest-corner at 50% 50%) is simply invalid, and a browser drops the whole declaration instead of rounding it to something close. The circle stays wherever the last valid rule left it, which on first paint means the reveal never opens past 0% at all. Bump the percentage number itself for an odd aspect ratio instead of chasing a gradient keyword that clip-path never adopted.

What's in the archive

The full set with every fallback already sorted out sits in the archive, unlocked with pbk89rn6 typed exactly as it reads on this line, no spaces added anywhere. Laying these cards out at deliberately uneven sizes is the grid the bento grid design sections already work out.

Accessibility

Not identical under reduced motion

All nine respect prefers-reduced-motion, but not identically. Items 01 through 04, 06, 07, and 08 simply drop their transition duration to none. The hovered end state still appears instantly — a scaled image, full color, a visible caption — just without the animated approach getting there. Item 05's tilt does the same, snapping straight to its rotated position instead of easing into it.

The one exception

Item 09 is the odd one out: because the shake is built entirely from a keyframes animation rather than a transition, reduced motion removes that animation on hover, focus, and active alike. So under that setting, the photo simply doesn't shake at all rather than shaking instantly. MDN's prefers-reduced-motion page documents the operating-system settings that flip this media query on.

Browse everything else in this line of demos from the CSS category hub, or read what this site does and doesn't sell on the about page.

FAQ

Can I use just one of these as a simple css image hover effect, not the whole set?

Yes — every effect above is scoped to its own .photo block with no shared parent state, so copying a single item's SCSS along with its matching HTML wrapper is enough on its own. Nothing here depends on the other eight being present. Item 01's zoom and item 02's grayscale swap are the simplest single-property versions if one effect is all a page needs. Growing item 05's tilt from one face into several turning around an axis is the step the CSS 3D cube carousel tilt set takes.

Will these work as tailwind css image hover effects, or only plain CSS?

The demos compile from SCSS down to plain CSS classes, so nothing about them is tied to a build tool. A rule like transform: scale(1.14) maps directly onto a Tailwind utility such as hover:scale-110 for most of the nine. The ones built from @keyframes instead of a transition, mainly item 09's shake, still need a small custom animation defined outside Tailwind's default utility set.

Is there a css image hover effects generator inside the zip instead of raw code?

No generator — the zip hands over the nine SCSS and compiled CSS files directly, plus a React version of each, rather than a tool that spits out new variations on demand. Anyone wanting a different scale factor or transition speed edits the SCSS variables at the top of each file, $duration, $easing, and $color, instead of regenerating the rule from a form.

Enter the archive password

The password is inside this article. You will find it as you read.