html - 如何在图像上制作文字并在鼠标悬停在图像上时显示？

Question

我想在图片上添加文字。我想做类似的事情

当您将鼠标悬停在图像上时，我想显示这段文字。

这是我当前的 HTML 和 CSS

.moimage {
  width: 120px;
  height: 176px;
  float: left;
  display: inline-block;
}

.covercomment {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}

.name {
  width: 100%;
  display: inline-block;
}

<div class="molist">
  <img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
  <ul class="wrapper">
    <li class="covercomment">
      <span class="cocom">2 Comments</span>
    </li>
    <li class="coverLinks">
      <span class="colin">2 Links</span>
    </li>
    <li class="coverviews">
      <span class="covedlin">60 Views</span>
    </li>
  </ul>
  <span class="name">Testing Name Here</span>
</div>

Answer 1

.moimage {
  width: 120px;
  height: 176px;
  display: inline-block;
  position: relative;
}

.name {
  width: 100%;
  display: inline-block;
}

.wrapper {
  position: absolute;
  color: white;
  list-style-type: none;
  z-index: 2;
  top: 0;
  left: 0;
}

<div class="molist">
  <img class="moimage" src="http://i.imgur.com/UU5q8FB.jpg">
  <ul class="wrapper">
    <li class="covercomment">
      <span class="cocom">2 Comments</span>
    </li>
    <li class="coverLinks">
      <span class="colin">2 Links</span>
    </li>
    <li class="coverviews">
      <span class="covedlin">60 Views</span>
    </li>
  </ul>
  <span class="name">Testing Name Here</span>
</div>