html - 悬停时显示文本

Question

我想隐藏我的 <h2>元素，直到用户将鼠标悬停在图像上。

因此，当用户将光标移到图像上时，它会在图像上显示“Drinks”一词。我也希望文字居中显示在图片上。

谁能告诉我如何在 CSS 中实现这一点？

演示:https://jsfiddle.net/hj3xrumo/

li {
  list-style-type: none;
  padding: 0;
  margin: 0
}

li h2 {
  position: relative;
  top: 0;
}

<h1>
  Test
</h1>

<li class="product-category product first">
  <a href="#">
    <img src="http://placehold.it/370x370" alt="Drinks" width="370" height="370" />
    <h2 class="woocommerce-loop-category__title">Drinks</h2>
  </a>
</li>

Answer 1

使用 position: absolute;display:none;至 h2并使其成为display: block在 img:hove

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
  display:inline-block;
}

li h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  display: none;
  margin:0;
}

li a:hover h2 {
  display: block
}

<ul>
  <li class="product-category product first">
    <a href="#">
      <img src="http://placehold.it/370x370" alt="Drinks" width="370" height="370" />
      <h2 class="woocommerce-loop-category__title">Drinks</h2>
    </a>
  </li>
</ul>