# ImageZoom

> Hover or click-to-zoom image viewer for product details

Canonical URL: https://fa7e86e3d553:3005/islands/content/image-zoom

> Hover/click-to-zoom image viewer. Use for product detail shots showing texture or craftsmanship.

## Preview

**Category**: Content

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| src | string | yes | - | Image URL |
| alt | string | no | "" | Alt text for accessibility |
| zoomLevel | number | no | 2.5 | Zoom magnification factor (1.5-4.0 recommended) |
| trigger | enum | no | hover | Zoom trigger: 'hover' or 'click' |

## Embed Example

```html
<lx-island name="ImageZoom">
  <script type="application/json">
{
  "src": "example-src"
}
  </script>
</lx-island>
```

## Usage Patterns

**Product detail section** (hover zoom):

```html
<lx-island name="ImageZoom">
  <script type="application/json">
{
  "src": "example-src"
}
  </script>
</lx-island>
```

**Mobile-friendly** (click to zoom):

```html
<lx-island name="ImageZoom">
  <script type="application/json">
{
  "src": "example-src"
}
  </script>
</lx-island>
```

## Tips

- Use **high-resolution images** (at least 2x zoom level) or zoom reveals pixelation
- zoomLevel:2.5 is default (shows 2.5x magnification)
- zoomLevel:1.5-2.0 for subtle zoom, 3.0-4.0 for extreme detail
- trigger:'hover' best for desktop (instant feedback)
- trigger:'click' better for mobile (avoids accidental zoom on scroll)
- Use ProductGallery with `enableLightbox:true` for multi-media PDP expansion

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `root` | Outermost container |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [BeforeAfter](/islands/content/before-after) — For comparison shots (before/after skincare, etc.)
- [VideoPlayer](/islands/content/video-player) — For product demos instead of static zoom