js滚动图片变大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Zoom on Hover</title>
    <style>
        .image-container {
            width: 200px;
            height: 200px;
            overflow: hidden;
            margin: 20px;
        }
        .image-container img {
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="path/to/your/image.jpg" alt="Sample Image">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const imageContainer = document.querySelector('.image-container');
            const img = imageContainer.querySelector('img');

            imageContainer.addEventListener('mouseenter', function() {
                img.style.transform = 'scale(1.2)';
            });

            imageContainer.addEventListener('mouseleave', function() {
                img.style.transform = 'scale(1)';
            });
        });
    </script>
</body>
</html>

.image-container img {
    will-change: transform;
}