thumbnail hover scrim overlay scale image clip-path blog post card image hover portfolio thumbnail interaction product image hover effect overflow hidden breaks with GPU transforms and border-radius need smooth image scale with dark overlay want clip-path solution for rounded corner scale
Thumbnail Hover Scrim
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/thumbnail-hover-scrim.json Preview
Background
Customize
Quick Start
<div class="thumbnail-hover-scrim"><img src="..." alt="..."></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 782 bytes · 38 lines
- Custom Properties
-
--scrim-color--scrim-speed--thumb-radius - Classes
-
.thumbnail-hover-scrim
thumbnail hover scrim overlay scale image clip-path
Image scales up and a dark scrim fades in on hover. The key technique is clip-path: inset(0 0 0 0 round ...) combined with translate3d(0,0,0) to keep GPU compositing while honoring border-radius — something overflow: hidden alone can’t reliably do.
Card thumbnail
<div class="thumbnail-hover-scrim">
<img src="/placeholder.svg" alt="Project" class="h-48 w-full object-cover">
</div>Custom radius and scrim
<div class="thumbnail-hover-scrim" style="--thumb-radius: 1.5rem; --scrim-color: oklch(0.2 0.15 250 / 0.4)">
<img src="/placeholder.svg" alt="Portfolio" class="aspect-video w-full object-cover">
</div>