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

我想在图像上制作文字。我想做类似的事情



当您将鼠标悬停在图像上时，我想显示此文本。

这是我当前的 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>

最佳答案

HTML 结构

<!-- Container with no position to handle flow after stack -->
<div class="container">
  <!-- Stack with position: relative -->
  <div class="stack">
    <!-- Image and overlay with position: absolute -->
    <img src="" alt="">
    <div class="overlay"></div>
  </div>
  <!-- Caption -->
  <h4></h4>
</div>

宽度效果

向 .overlay 添加 width: 0 、 overflow: hidden 和 过渡 以实现效果。

使效果发生

.container:hover .overlay { width: 100% }

例子

html,
body {
  margin: 0;
  padding: 0;
}

html,
body,
.img-container .stack,
.img-container img,
.img-container .overlay {
  width: 100%;
  height: 100%;
}

.img-container {
  width: 120px;
  height: 176px;
}

.img-container img {
  display: block;
}

.img-container>.stack {
  position: relative;
}

.img-container * {
  margin: 0;
  padding: 0;
}

.img-container ul {
  list-style: none;
  padding: 20px 15px;
  color: white;
}

.img-container img,
.img-container .overlay {
  position: absolute;
}

.img-container .overlay {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  background: #252525;
  opacity: 0.9;
  transition: all .3s ease-in-out;
}

.img-container:hover .overlay {
  width: 100%;
}

.img-container h4 {
  padding: 10px 5px;
}

<div class="img-container">
  <div class="stack">
    <img src="http://i.imgur.com/UU5q8FB.jpg" alt="">
    <div class="overlay">
      <ul>
        <li>2 Comments</li>
        <li>2 Links</li>
        <li>60 Views</li>
      </ul>
    </div>
  </div>
  <h4>Name</h4>
</div>

关于html - 如何在图像上制作文本并在鼠标悬停在图像上时显示它？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47969693/