MediaZoom

Wraps an <img> or <video> so it scales up on parent hover. Designed to live inside CardMedia — when the card is hovered, the media zooms. CSS-only, GPU-accelerated, respects reduced-motion.

BOOGIE 0002

Basalt

BOOGIE 0003

Silica

BOOGIE 0004

Vintage

Usage

import { Card, CardMedia, MediaZoom } from '@bwo-ui/react';

<Card pad="none" radius="sm">
  <CardMedia aspect="3 / 4">
    <MediaZoom scale={1.08}>
      <img src="/tile.jpg" alt="" />
    </MediaZoom>
  </CardMedia>
</Card>

Props

Prop	Type	Default	Description
`scale`	`number`	`1.06`	Final scale factor on hover.