Image zoom for Astro

Click any photo on this page. It grows from its place to fill the screen, and a group of photos becomes a gallery you can swipe.

pnpm add astro-image-zoom@beta
Ridge of glowing orange gas and dust in the Carina Nebula under a blue sky full of stars
Saturn V rocket lifting off beside its launch tower in a cloud of flame and smoke
Astronaut in a white spacesuit working on the gold-foil body of the Hubble Space Telescope
The space station with the space shuttle Endeavour docked to it, above the curve of Earth
Center of the Milky Way glowing in red, blue and yellow, combined from three space telescopes
Wide panorama of rocky Martian ground and distant hills under a hazy sky

Wherever your images are

Inside an article

Photos in the flow of text. The zoom starts from the image itself, so the eye never loses it.

On Christmas Eve 1968, Apollo 8 came around the far side of the Moon, and Bill Anders saw the Earth rise over its horizon.

Earth, half in shadow, rising above the grey horizon of the Moon
EarthriseApollo 8 · 1968

He asked for a roll of color film and took the photo in a hurry, before the Earth moved out of the window.

A gallery

All the images inside one <ImageZoom> form a gallery. Move with the arrows, the ← →keys or a swipe.

Thousands of galaxies of many shapes and colors around the galaxy cluster SMACS 0723
Sombrero galaxy seen edge-on, a bright white core crossed by a dark band of dust
Bubble Nebula: a blue bubble of gas blown by a massive star, among clouds of orange and teal
Horsehead Nebula in infrared, a dark tower of gas and dust shaped like a horse's head
Heart of the Lagoon Nebula: billowing golden clouds of gas lit by a young star
Cassiopeia A, the remains of an exploded star, a shell of pink, orange and blue filaments
Whirlpool galaxy, a spiral with pink star-forming regions along its arms
Helix Nebula, a ring of orange and blue gas around a dying star, like an eye

Several galleries

Each <ImageZoom> is its own gallery: the arrows only move through the photos of the one you opened.

Earth from orbit

Green and red aurora over the dark curve of the Earth, seen from orbit
Spiral of clouds of Hurricane Helene over the sea, seen from orbit
City lights along the coasts of north Africa and southern Europe at night, seen from orbit

Mars

Perseverance rover beside the small Ingenuity helicopter on reddish Martian ground
Hill called Santa Cruz rising above a rock-strewn Martian plain
Perseverance rover selfie on a flat Martian plain, with sample tubes left on the ground

The Moon

Buzz Aldrin walking on the Moon near a leg of the lunar module
Buzz Aldrin standing beside the U.S. flag on the Moon
Harrison Schmitt beside the U.S. flag on the Moon, with Earth small in the black sky

Built in

  • Keyboard

    Tab to a photo and press Enter. The arrow keys move through the gallery, Escape closes, and focus goes back where it was.

  • Screen readers

    A native dialog with labelled controls. The caption is announced as you move, and every image keeps its alt text.

  • Touch and touchpad

    Swipe between photos with the inertia of a real carousel. A vertical swipe or a scroll closes the zoom.

  • Works without JavaScript

    Each photo is wrapped in a link to its full-size file, so it still opens before the script loads, or without it.

  • Safe from your CSS

    The overlay lives in a shadow root, so the styles of your site can't break it, and it doesn't style your page: your thumbnails keep your design. You change the zoom on purpose, with CSS variables.

  • Zero dependencies

    One Astro component and a small script. It follows light and dark mode, reduced motion and forced colors.

Get started

  1. 1. Install

    pnpm add astro-image-zoom@beta

  2. 2. Wrap your images

    Point data-zoom-src at a full-size version when the image on the page is resized.

    ---
import ImageZoom from 'astro-image-zoom/ImageZoom.astro';
import { Image, getImage } from 'astro:assets';
import photo from '../assets/earthrise.jpg';

const fullSize = await getImage({ src: photo, width: photo.width });
---
<ImageZoom>
  <Image
    src={photo}
    alt="Earth rising above the Moon"
    width={800}
    data-zoom-src={fullSize.src}
  />
</ImageZoom>

  3. 3. Make it yours

    Options for the navigation, the caption and how it closes; colors, spacing and shapes with CSS variables.

    Read the docs