mask reveal clip-path diagonal transition media overlays with directional motion hero cards with cinematic reveals section transitions on hover fades feel generic want shape-based transitions without JS need an editorial reveal effect for cards
Diagonal Reveal
Fetch snippet JSON:
curl https://webspire.de/snippets/masks/diagonal-reveal.json Masks
Diagonal Reveal
A slanted mask gives the transition a directional editorial feel.
Background
Customize
Quick Start
<figure class="diagonal-reveal rounded-[2rem] overflow-hidden"><img src=\"/image.jpg\" alt=\"\" /></figure>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 722 bytes · 31 lines
- Custom Properties
-
--reveal-overlay--reveal-duration - Classes
-
.diagonal-reveal
mask reveal clip-path diagonal transition
Instead of a simple opacity fade, this effect uses clip-path to create a directional wipe. It reads better on editorial layouts, hero previews and image cards.
Editorial media card
<figure class="diagonal-reveal rounded-[2rem] overflow-hidden">
<img src="/placeholder.svg" alt="" class="h-full w-full object-cover" />
</figure>