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.