CSS Animation Example: Image Zoom & Pan

The "Image Zoom & Pan" represents arguably the most common hover interaction used across the modern web for thumbnails, articles, and product cards.

This effect combines a scaling transform on a child image with an overflow: hidden parameter on its parent container. Without overflow: hidden, hovering would simply cause the image to break out and overlap its surrounding content. By slightly scaling the image via transform: scale(1.1) during a transition, it creates a subtle magnification effect without distorting standard document flow.

Here is the code to create the Image Zoom & Pan animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

.image-container {
    width: 300px;
    height: 200px;
    border-radius: 8px;
    /* This is critical: it keeps the zoomed image from spilling out */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.image-container img {
    width: 100%;
    height: 100%;
    /* object-fit ensures the image covers the box perfectly */
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* On hover, slightly scale the image up */
.image-container:hover img,
.image-container:focus-within img {
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .image-container img {
        transition: none;
    }
}
</style>

View Output

Accessibility Considerations

Because the scaling effect expands the visual field towards the user, it can be problematic for those with vestibular motion sensitivities. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion. We should disable the smooth zoom transition completely for users who have enabled this setting on their device.

If you prefer, you can swap the scale for a subtle opacity or brightness filter change to still convey interactivity without relying on motion.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .image-container img {
        /* Remove the duration, causing instant zoom rather than sliding up close */
        transition: none; 
    }
}