CSS Animation Image Zoom Pan Example

<!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>