When to use it

Use ImageWithHover when the shared image zoom treatment should come along with an otherwise normal image element. It fits link blocks, cards, and editorial tiles where a subtle hover cue adds polish.

Composition notes

The component is intentionally minimal. enableHover toggles the effect, and the rest of the sizing and image behavior comes from normal image props and layout classes.

The hover treatment relies on a parent group plus an overflow-clipped wrapper, so apply it inside the same card, tile, or link container that owns the interaction. The motion itself is driven by --enad-image-hover-scale and --enad-image-hover-duration, which makes it easy to tune globally.

Behavior and theming guidance

Use the hover effect sparingly. It works best when the image is already part of a clickable or preview-oriented surface. Disable it when motion would feel noisy or misleading.

Because the component still renders a normal img, keep the alt text and loading behavior aligned with the surrounding surface. If the image is purely decorative inside a card that already has a clear text label, an empty alt can be the right choice.