← Back to All Demos

Image Effects

CSS animation effects applied to images on hover. Five distinct effects, all pure CSS.

5
Effects
hover
Trigger
CSS
Powered By
01

Variation 01

Zoom on Hover

Smooth zoom-in effect on hover. The most common image interaction pattern.

effect_type=zoom
animation_mode=hover
border_radius=8
Demo landscape
Demo landscape
02

Variation 02

Swing

Playful swing animation that tilts the image side to side. Eye-catching and fun.

effect_type=swing
animation_mode=hover
border_radius=8
03

Variation 03

Pulse

Gentle pulsing scale effect that makes the image breathe. Subtle and organic.

effect_type=pulse
animation_mode=hover
border_radius=8
Demo landscape
Demo landscape
04

Variation 04

Rotate

Subtle rotation on hover. A slight tilt that adds dimension to flat images.

effect_type=rotate
animation_mode=hover
border_radius=8
05

Variation 05

Grayscale to Color

Starts grayscale and reveals full color on hover. Great for portfolio and team grids.

effect_type=grayscale
animation_mode=hover
border_radius=8
Demo landscape

All Variations

01
Zoom
effect_typezoom
animation_modehover
border_radius8
02
Swing
effect_typeswing
animation_modehover
border_radius8
03
Pulse
effect_typepulse
animation_modehover
border_radius8
04
Rotate
effect_typerotate
animation_modehover
border_radius8
05
Grayscale to Color
effect_typegrayscale
animation_modehover
border_radius8