当我悬停img标签以在其下方显示文本时，如何制作动画

<div class="container">
  <img src="image.jpg" alt="Image">
  <p class="text">这是文本内容</p>
</div>

.container {
  position: relative;
}

.text {
  position: absolute;
  bottom: -20px; /* 调整文本位置 */
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

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

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

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