Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/storefront/image-with-hover.

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.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=ImageWithHover.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes