Image Zoom

<script setup lang="ts">
import { Image, ImageZoom } from '@animate-ui/vue/primitives/effects/image-zoom'
</script>

<template>
  <ImageZoom
    aria-label="Black porcelain mug, zoomable"
    class="rounded-2xl border bg-white"
    width="256px"
    height="256px"
  >
    <Image
      :src="'/demos/mug.webp'"
      alt="Black porcelain mug with a square handle and natural clay accents"
      width="256"
      height="256"
    />
  </ImageZoom>
</template>

InstallationCopy Anchor Link

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

UsageCopy Anchor Link

<script setup lang="ts">
import { Image, ImageZoom } from '@animate-ui/vue/primitives/effects/image-zoom';
</script>

<template>
  <ImageZoom width="320px" height="320px" aria-label="Product photo, zoomable">
    <Image src="/product.webp" alt="The product" />
  </ImageZoom>
</template>

Image renders an img by default; pass as to use your framework's image component (:as="NuxtImg").

AnimationCopy Anchor Link

• Hovering zooms in to zoom-scale on a spring, from the point under the pointer; moving the pointer pans the zoom.
• Clicking (or tapping on touch screens) toggles the zoom. The cursor shows whether a click zooms in or out.
• Under reduced motion, the zoom jumps instead of scaling.

API ReferenceCopy Anchor Link

ImageZoomCopy Anchor Link

ImageCopy Anchor Link

CreditsCopy Anchor Link

• Inspired by Jurre's Hover Zoom Framer component.