鼠标悬停在图像上的文字？答案

【问题标题】：Text on image with mouseover?鼠标悬停在图像上的文字？
【发布时间】：2017-03-31 08:52:23
【问题描述】：

当鼠标悬停在图像上时，我想在图像上显示文本（不使用 JS），我尝试过使用 html/css 并查看了 stackoverflow，但仍然找不到实现此功能的方法.有人有想法吗？再次感谢您的帮助。

图片下方已经有文字（h2）让我很困惑，我尝试使用这种方法（Text on image mouseover?）但失败了。

HTML

<ul class="portfolio">
    <li class="project option-1">
        <div class="project-image">
            <a href="default.asp"><img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"/>
        </div>
        <div class="project-info">
            <h2 class="project-info-title">Cricket Journey</h2>
            </a>
        </div>
    </li>

我没有显示 CSS，因为我已经知道如何实现这个函数的 HTML 方面，但不知道 CSS

【问题讨论】：

标签： html css hover

【解决方案1】：

如果我理解正确，当图像悬停在图像上时，您希望文本显示在图像上。如果是这样，则在图像悬停时显示<p>（就在图像之后），如下所示：

p {
  /* position the text */
  position: absolute;
  left: 0px;
  display: none;
  width: 300px;
  text-align: center;
  margin: 0;
  height: 20px;
  top: 140px;
  
}
img {
  position: absolute;
  left: 0;
  top: 0;
}
img:hover + p {
  display: block;
}

<img src="/favicon.ico" height="300">
<p>some text to display here</p>

编辑：居中文本

【讨论】：

哇，非常感谢。基本上已经解决了，但是文字显示在我的图像上方，我怎样才能确保它显示在中心？
您可以设置p的宽度并将text-align设置为居中，这将使文本居中。
我在原帖中添加了。
谢谢，但文字似乎仍然高于我的图像。也许是因为我的图像高度？
这是因为p 有边距。将边距设置为 0 以将其放在图像的顶部。