html - 鼠标悬停在图像上的文字？

Question

我想在鼠标悬停在图像上时显示文本(不使用 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

Answer 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>

编辑:居中文本