如何在淡出图像的同时淡入文本？

<div class="container">
  <img src="image.jpg" alt="Image">
  <p class="text">Text</p>
</div>

.container {
  position: relative;
  width: 500px;
  height: 300px;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.container:hover img {
  opacity: 0;
}

.container:hover .text {
  opacity: 1;
}

const container = document.querySelector('.container');
const img = container.querySelector('img');
const text = container.querySelector('.text');

container.addEventListener('mouseenter', () => {
  img.style.opacity = 0;
  text.style.opacity = 1;
});

container.addEventListener('mouseleave', () => {
  img.style.opacity = 1;
  text.style.opacity = 0;
});