create a div of images that is always no bigger than 80% of the display height and the images scale accordingly. when you hover over an image it zooms slighly and the other images gray out in javascript

<div id="image-gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
149 chars
6 lines

#image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

#image-gallery img {
  max-height: 100%;
  max-width: 100%;
  transition: transform 0.5s, filter 0.5s;
}

#image-gallery img:hover {
  transform: scale(1.1);
  filter: grayscale(50%);
}
308 chars
19 lines

index.tsx
const images = document.querySelectorAll('#image-gallery img');

images.forEach((image) => {
  image.addEventListener('mouseover', function() {
    images.forEach((otherImage) => {
      if (otherImage !== image) {
        otherImage.style.filter = 'grayscale(50%)';
      }
    });
  });

  image.addEventListener('mouseout', function() {
    images.forEach((otherImage) => {
      if (otherImage !== image) {
        otherImage.style.filter = '';
      }
    });
  });
});
475 chars
20 lines