AI CSS Animations

CSS Image Hover Effects

48 CSS image hover effects: zooms, color and blur changes, caption slides, overlays, mask reveals and gallery effects. Swap the gradient stand-in for your own image.

Image Zoom Card

The cover image scales up inside its frame while the frame stays put, a cinematic push-in. The image container clips the overflow so nothing spills.

card · image · tailwind

Caption Reveal Card

A caption panel slides up over the image on hover, the classic portfolio and gallery treatment. The panel is inside the image frame so it never changes the card's height.

card · image · overlay

Content Rise Card

The title sits low on the image; on hover it rises and a description fades in beneath it. Everything is positioned inside the image, so the card's footprint never changes.

card · image · overlay

Grayscale to Color Image

Images sit in black and white until hovered, then bloom into color and grow a touch. A filter transition does all the work, so it applies to any img or background.

image · filter

Zoom with Dark Overlay Image

The image pushes in while a dark tint settles over it and a label appears in the middle. The go-to hover for photo grids that lead to a detail page.

image · overlay

Blog Card Hover

A horizontal blog card: the thumbnail pushes in, the headline gets an underline that runs line by line, and the read link arrow nudges. The underline is a background on an inline span.

card · underline · image

Stacked Cards Fan Out Hover

A small stack of photo prints that fans out on hover, the back two swinging to either side on a springy curve. One custom property per card drives both its resting tilt and its fan angle.

card · image · playful

Pop Out Card Hover

A hot air balloon rises out of its photo and floats above the card's top edge. The scene clips itself but the card does not, so the balloon can break the frame with no 3D transforms.

card · image · playful

Parallax Card Hover

The landscape in the card splits into layers that slide at different speeds: the sun rises, the far ridge barely moves, the near hills sweep past. Pure transforms on three stacked shapes.

card · image

Parallax Layers Image Hover

A landscape split into sky, ridge and hills that slide at different speeds on hover, so the near hills travel most and the sky least. Three transformed layers, no JavaScript.

image · 3d · playful

Expanding Gallery Image Hover

Four photo strips share a row and the hovered one widens to take most of it while a label fades in. The strips animate flex-grow and keep a fixed background size, so each widens like a window.

image · reveal

Split Image Hover

The photo is cut down the middle and the two halves slide apart on hover to reveal a caption behind them. Each half shows its side of one background, sized to 200 percent.

image · reveal · text

Shutter Blinds Image Hover

Five colored slats sweep across the photo one after another, alternating sides like closing blinds, then a caption lands on top. The stagger is one transition-delay per slat.

image · overlay · reveal

Circle Reveal Image Hover

A colored overlay grows out of the center of the photo as an expanding circle, carrying the title with it. One clip-path transition from circle(0) to a circle wider than the frame.

image · overlay · reveal

Inset Border Draw Image Hover

A thin white frame draws itself inside the photo, horizontal lines first, then vertical, and a title fades in at the center. Two pseudo-elements scaled from zero carry the four lines.

image · border · text

Polaroid Image Hover

A tilted instant print with a handwritten caption that straightens, lifts and throws a longer shadow on hover, with a little overshoot. The faded film tone clears as it rises.

image · shadow · playful

Ken Burns Image Hover

Hovering starts a slow documentary-style push and pan across the photo while letterbox bars slide in. The hover transition runs 8 seconds, the exit only 0.8, so it never feels stuck.

image · minimal

Duotone to Color Image Hover

The photo sits as a two-color print, dark plum shadows and accent highlights, then washes into full color on hover. A multiply layer and a lighten layer over a grayscale photo make the duotone.

image · overlay · gradient

Blur to Focus Image Hover

A soft, out of focus photo snaps sharp on hover while camera autofocus brackets close in and fade, like a focus pull. The blur is a filter transition, the brackets are background gradients.

image · minimal

Zoom and Rotate Image Hover

The photo pushes in and turns a few degrees inside a fixed frame, a livelier cousin of the plain zoom. Scaled to 1.25 so the rotated corners never show past the rounded edges.

image · minimal · tailwind

Slide Up Caption Image Hover

The title rests on a soft scrim at the bottom of the photo, and on hover the whole caption rises to make room for a second line while the accent bar stretches. Good for blog and news covers.

image · text · overlay

Lightbox Icon Image Hover

An accent tint washes over the photo and a round magnifier button spins in with a small overshoot, the usual cue that a click opens a lightbox. The icon is inline SVG.

image · overlay · icon

Reflection Image Hover

A photo standing on a glossy floor, with a faded mirror image under it. On hover the photo lifts and the reflection drops away and dims, the way a real one would. Uses a flipped copy and a mask.

image · shadow · minimal

Diagonal Wipe Image Hover

Two slanted panels wipe in from the left, a pale sliver first and the accent panel a beat later, leaving the right of the photo in view beside the caption. Each panel is one clip-path polygon.

image · overlay · fill

Spotlight Reveal Image Hover

At rest the photo is dark except for a soft spotlight in the middle; hover and the light spreads to the edges. The vignette is one radial gradient that scales up, so only a transform animates.

image · overlay · reveal

Fanned Photo Stack Image Hover

Three prints lie in a loose pile; hover and the two underneath fan out left and right while the top one lifts. Handy for album covers and folders. Each print has its own springy transform.

image · playful · shadow

Page Curl Image Hover

The bottom corner of the photo is lifted a little at rest and peels back on hover to show the next photo underneath. A clip-path cuts the corner while a shaded triangle plays the folded flap.

image · playful · reveal

Slide Aside Image Hover

The photo covers the whole card, then slides right on hover to uncover a title, a line of copy and a link that follow it in with a stagger. The text panel sits behind the photo all along.

image · reveal · text

Gallery Focus Image Hover

Hover one photo in a row and it grows while its neighbours shrink, fade and lose their color. The :has() selector dims the siblings only while an item is hovered, not the gaps between them.

image · minimal

Square to Circle Image Hover

A square thumbnail turns a quarter of a turn as its corners round off into a circle, while the photo inside counter-rotates and zooms so it stays level. The wrapper never moves, so hover is steady.

image · playful · tailwind

Corner Frame Image Hover

Four white corner brackets sit at the edges of the photo like a viewfinder, then glide inward on hover to box in a caption as the photo dims. Each corner is one element moved with transform.

image · border · text

Outline Ring Image Hover

An accent ring springs out around the photo on hover and keyboard focus, with a small gap, while the photo nudges in. It is outline-offset, so the ring takes no layout space and follows the radius.

image · border · tailwind

Ambient Glow Image Hover

The photo lifts and casts a soft glow in its own colors, like ambient TV lighting. The glow is a blurred, saturated copy of the same background sitting behind it, faded in with opacity.

image · glow · shadow

Glitch Image Hover

While hovered, color-shifted slices of the photo jump sideways at random-looking intervals, a digital glitch. Two copies with clip-path insets are stepped through keyframes with steps(1).

image · playful

Before and After Image Hover

A flat, unedited version of the photo on the left and the finished one on the right, split by a handle. Hover and the handle sweeps left, wiping the whole frame to the edited shot. No JavaScript.

image · reveal · overlay

Tile Mosaic Image Hover

The photo is secretly nine tiles; hover and they part from the center with a springy stagger into a rounded mosaic. Each tile shows its slice of one background through background-position.

image · playful

Image Swap Hover Effect

Hover crossfades to a second shot, the way shop grids show a product's other side, and a pager dot slides over to match. The second image settles from a slight zoom as it fades in.

image · minimal · tailwind

Scrolling Screenshot Image Hover

A browser window holding a tall page screenshot that scrolls to the bottom while hovered and glides back when you leave. A portfolio classic: one transform, 3 seconds down, 0.8 back.

image · reveal

Offset Border Image Hover

An accent outline sits offset from the photo like a misregistered print, and on hover the two slide together until the frame lines up with the edges. Portfolio headshots use this a lot.

image · border · tailwind

Paper Fold Card Hover

A travel card folded into three zig-zag panels like a brochure. On hover the folds open flat. Each panel hangs from the one above it, so one rotation per panel drives the whole fold.

card · 3d · image · reveal

Tile Flip Grid Hover

A night scene split into fifteen tiles that flip in a diagonal wave to show the same view by day. Every tile reads its own slice of one shared background, so both pictures line up.

image · 3d · reveal

Accordion Fold Image Hover

A landscape cut into five vertical strips that pleat into an accordion on hover, alternate strips turning toward and away from the light. Each strip slides in so the folds stay joined.

image · 3d · playful

Cover Flow Hover Effect

Three album covers in the classic cover flow pose, the side ones turned inward and set back. On hover they swing flat and spread into a row. Each cover is one element with its own 3D transform.

image · 3d · card

3D Carousel Ring Hover

Six picture cards stand in a ring seen slightly from above. Hover and the ring spreads out and spins; leave and it stops where it is, because hover only toggles animation-play-state.

image · 3d · card

Image Fill Text Hover

A solid headline turns into a window onto a sunset scene on hover. The scene is layered gradients clipped to the text, revealed by fading the text color to transparent.

text · image · gradient

Direction Aware Hover Effect

The caption slides in from whichever edge the pointer entered through. Four invisible triangles do it without JavaScript: the one you cross grows over the card, so the direction holds until you leave.

card · image · overlay

Zoom to Cursor Image Hover

The photo zooms in toward the part you point at, and the zoom follows as you move, like a product gallery. A 3x3 grid of invisible cells moves transform-origin, so no JavaScript and no second image.

image · minimal

Video Thumbnail Hover Effect

A video card that starts a preview on hover: the play button fades, clouds drift across the frame and a progress bar fills along the bottom. The playback is faked with transforms, no video file.

image · card · overlay

How to use these image hover effects

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no libraries. Classes are prefixed per effect so several can share a page.

To change the color, set --hfx-color on the element or any ancestor. To change the size, set --hfx-size: every dimension inside is in em, so padding, radii and offsets scale together.

Every snippet ships with a prefers-reduced-motion rule that disables the movement for people who asked their OS for less of it. The hover state still applies, only the transition is skipped.