Html 悬停时在图像上覆盖文本

我试图在我的页面上的图像上覆盖一些文字。我知道代码必须是css的，但我不能让它在不扭曲和抛弃一切的情况下工作。这里是图像在我的html代码中的位置

<div id="current">
        <h3><u>Current Products</u></h3>
        <img id="nintendo" src="http://www.albany.edu/~jc191638/image/n641.jpg" alt="n64"/> 
        <span class="text">text text text...</span>
        <p id="nintext">
</div>

---

如果一个项目是position:absolute，那么它将相对于最近的父元素（具有position:relative或position:absolute）或主体元素（如果没有父元素满足该条件）进行定位

因此，必须在包含的div中添加“position:relative；”

#current{
position: relative;
height:984px;
width:600px;
background-color:    #475F77;
padding-bottom:10px;
text-align:center;
border-style:solid;
border-color:    #D74B4B;
}

---

您可以在这里测试它：

没有

浮动：居中如果您希望在图像上显示文本，可以按如下方式执行：

HTML:

这更接近我所需要的，我实际上只希望文本在我悬停在图像上时显示，并且文本将显示在图像上。然后您将希望将image和span元素添加到容器div中。是否有方法将其放入图像的css中？div实际上并没有到此结束，我只是省略了其他内容，因为我想把焦点放在图像上。对不起，我不明白你的意思。。css。。把什么放在哪里？不，但只需再加一个div。把“holder”放在“current”里面。
#current{
position: relative;
height:984px;
width:600px;
background-color:    #475F77;
padding-bottom:10px;
text-align:center;
border-style:solid;
border-color:    #D74B4B;
}

<div id="holder">
  <img src="some.png" />
  <span id="over_img">This text is over image</span>
</div>

#holder {
  position: relative;
  overflow: hidden;
}

/* image is positioned to #holder top left */
#holder img {
  display: block;
}

#over_img {

  /* absolute positioning in holder */
  position: absolute;
  left: 0px;
  top: 0px;

  /* image position property is static so image z-index = 0 we 
     just set this top of image by giving greater number for z-index */
  z-index: 10; 

  /* position relative to #holder top of image */
  top: 10px; 
  left: 10px;
}