cnc-image
A thin wrapper that adds a visual effect to whatever image you slot into it. It renders no
<img>
of its own — the image is yours, and the widget only supplies the behaviour around it.
Quick start
Put an <img> in the default slot and name an effect. Without an
effect the widget does nothing at all, which is a legitimate way to use it as a plain wrapper.
Hover to see the zoom.
<cnc-image effect="zoom" class="block h-48 w-72 overflow-hidden rounded-xl">
<img src="…" alt="…" class="h-full w-full object-cover" />
</cnc-image>Usage guidance
The image stays YOURS. Because the widget slots rather than renders, src,
alt, loading="lazy", srcset and sizing are all written on
your own <img> exactly as they would be without the wrapper — and
alt
in particular is nobody else's job.
Give the host a size and overflow-hidden. Both effects deliberately move the image
outside its natural box, so an unclipped wrapper is the usual reason a zoom looks broken.
parallax
only moves while something SCROLLS. It hunts for the nearest scrollable ancestor and falls back
to the window, so an image inside a short non-scrolling panel simply sits still — and the
effect costs a scroll listener plus a measurement per event, which is worth spending once on a
hero and not on every card in a list.