在具有叠加幻灯片效果但没有任何旋转效果的图像上悬停

<div id="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

#image-container {
  position: relative;
  width: 300px;
  height: 200px;
}

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.5s;
}

#image-container img:nth-child(2) {
  opacity: 0;
}

var imageContainer = document.getElementById("image-container");
var images = imageContainer.getElementsByTagName("img");

imageContainer.addEventListener("mouseover", function() {
  images[0].style.opacity = 0;
  images[1].style.opacity = 1;
});

imageContainer.addEventListener("mouseout", function() {
  images[0].style.opacity = 1;
  images[1].style.opacity = 0;
});