Image Swap
Hover to swap between two images with transition effects. Four transition types with timing control.
4
Transitions
5
Variations
CSS
Powered By
01
Variation 01
Crossfade
Smooth crossfade transition at 400ms. The most natural image swap — one fades in as the other fades out.
transition_type=crossfade
duration=400
border_radius=8
easing=ease
02
Variation 02
Slide Left
Slide left transition at 500ms. The new image pushes the old one out of frame.
transition_type=slide-left
duration=500
border_radius=8
easing=ease
03
Variation 03
Slide Right
Slide right transition at 400ms. Mirror of slide-left for a different directional feel.
transition_type=slide-right
duration=400
border_radius=8
easing=ease
04
Variation 04
Flip
Horizontal flip transition at 600ms. A dramatic 3D rotation that reveals the swap image.
transition_type=flip-horizontal
duration=600
border_radius=8
easing=ease
05
Variation 05
Fast, No Border Radius
Fast 200ms crossfade with sharp corners. Snappy and clean — no rounded edges.
transition_type=crossfade
duration=200
border_radius=0