在图像悬停时淡入淡出颜色并显示文本

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <div class="text-overlay">
    <p>相关文本信息</p>
  </div>
</div>

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

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.text-overlay p {
  color: #fff;
  text-align: center;
  font-size: 18px;
  padding: 20px;
}

.image-container:hover .text-overlay {
  opacity: 1;
}

// 可选：如果需要在图像加载完成后再显示效果，可以添加以下代码
window.addEventListener('load', function() {
  var imageContainer = document.querySelector('.image-container');
  imageContainer.addEventListener('mouseover', function() {
    var textOverlay = this.querySelector('.text-overlay');
    textOverlay.style.opacity = '1';
  });
  imageContainer.addEventListener('mouseout', function() {
    var textOverlay = this.querySelector('.text-overlay');
    textOverlay.style.opacity = '0';
  });
});