Transitions and Animation
Button hover: with vs without transition
Card lift on hover
Harbor Study
Oil on panel, 2025
translateY(-4px) + box-shadow
Night Garden
Acrylic on canvas, 2024
No hover effect (for comparison)
Accessibility note: This demo uses progressive
enhancement: transitions are only added inside
@media (prefers-reduced-motion: no-preference). If you
enable "Reduce motion" in your OS accessibility settings, the hover
effects still work but change instantly instead of animating. Try
toggling it to see the difference.