html怎么实现鼠标放在图片上出现文字效果

  
  
    
Your text here
  

是包裹图片和文本的容器。

2. 接下来，在CSS中设置容器元素和文本覆盖的样式。

.image-container {
  position: relative;
  display: inline-block;
}
.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-container:hover .text-overlay {
  opacity: 1;
}

在上述示例中，.image-container被设置为相对定位，并且.text-overlay被设置为绝对定位，覆盖在图片上方。当鼠标悬停在.image-container上时，我们将通过更改.text-overlay的透明度(opacity)来显示或隐藏文本。

3. 最后，将CSS样式与HTML元素相关联。

  
  
    
Your text here
  

这样，当鼠标悬停在图片上时，文本覆盖将以淡入的方式出现。你可以根据需要调整样式和效果。

请注意，上述示例仅为一种实现方法，你可以根据自己的需求进行修改和扩展。