如何使用悬停覆盖图像包括文本-仅限HTML、CSS、JavaScript

<div id="hover-container">
  <img src="image.jpg" alt="Image">
  <div class="overlay">
    <p>Text Overlay</p>
  </div>
</div>

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

#hover-container img {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay p {
  font-size: 24px;
  text-align: center;
}

#hover-container:hover .overlay {
  opacity: 1;
}

var hoverContainer = document.getElementById('hover-container');
var overlay = hoverContainer.querySelector('.overlay');

hoverContainer.addEventListener('mouseenter', function() {
  overlay.style.opacity = '1';
});

hoverContainer.addEventListener('mouseleave', function() {
  overlay.style.opacity = '0';
});