clip-path wipe hover reveal flip-box card directional card hover reveal effect modern flip-box alternative portfolio item back-face reveal 3D flip effects feel dated need directional content reveal on hover want clip-path based card interaction
Clip Wipe Hover
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/clip-wipe-hover.json Preview
Background
Customize
Quick Start
<div class="clip-wipe-hover"><div>Front</div><div class="clip-wipe-back">Back</div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 761 bytes · 33 lines
- Custom Properties
-
--wipe-speed--wipe-easing - Classes
-
.clip-wipe-hover.clip-wipe-back
clip-path wipe hover reveal flip-box card directional
A directional clip-path wipe that reveals a “back” layer on hover. Supports four directions (left, right, top, bottom) via data-direction. Uses cubic-bezier(0.62, 0.83, 0.34, 0.93) for a distinctive industrial feel.
Card with back reveal
<div class="clip-wipe-hover relative h-48 rounded-xl bg-slate-100">
<div class="flex h-full items-center justify-center">Front Content</div>
<div class="clip-wipe-back flex h-full items-center justify-center bg-slate-900 text-white">Back Content</div>
</div>Top-to-bottom wipe
<div class="clip-wipe-hover" data-direction="top">
<div>Default</div>
<div class="clip-wipe-back bg-blue-600 text-white">Revealed from top</div>
</div>