mask radial reveal hover cinematic hero image previews cinematic reveal cards spotlight-like content introductions straight wipes feel too generic need a reveal from the center without JS want a cinematic hover treatment
Radial Unveil
Fetch snippet JSON:
curl https://webspire.de/snippets/masks/radial-unveil.json Background
Customize
Quick Start
<figure class="radial-unveil rounded-[2rem] overflow-hidden"></figure>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 755 bytes · 31 lines
- Custom Properties
-
--radial-overlay--radial-size--radial-duration - Classes
-
.radial-unveil
mask radial reveal hover cinematic
This effect behaves like a lens opening over the content. It reads more dramatic than a standard fade and works well for posters, covers and previews.