Hover or focus the preview to slide the scrim caption up.
Overlay · 22 / 35
Hover Scrim
A frosted scrim caption slides up from the bottom on hover, blurring the image behind it.
Adjust
10px
22px
450ms
Metadata
interaction
Hover · static fallback
browser
Enhanced — backdrop-filter
reduced motion
included
touch fallback
Static on touch
Edit the CSS above — the preview updates live.
About Hover Scrim
Hover Scrim slides a frosted caption bar up from the bottom edge on hover or keyboard focus, blurring the image behind it with backdrop-filter. Tune --ifx-scrim for the tint, --ifx-blur for the frost strength, --ifx-slide for the travel distance, and --ifx-duration for pacing. backdrop-filter is enhanced support (raise the scrim tint for a solid fallback); the caption is decorative, stays static on touch, and reduced motion is honoured.
Use cases
travel
editorial
portfolio
gallery
Browser support
Enhanced — backdrop-filter. This effect uses an enhanced feature — provide a graceful fallback for older browsers.
Accessibility
Essential content is never hidden behind hover.
Includes a prefers-reduced-motion fallback.
Touch fallback: static on touch.
Keyboard accessible — the effect also triggers on focus-within.