悬停图片说明

Question

我正在尝试为我的网站实施一项功能，将鼠标悬停在图像上会在图像底部显示标题。有关如何执行此操作的任何提示？我正在尝试执行此操作，但是我正在使用的CSS模板中的某些内容有干扰。

这是我要为其添加标题的图像

<section class="5grid is-gallery">
    <div class="row">
        <div class="4u"> <a href="matthewpiatetsky.com/MicroChess.html" class="image image-full"><img src="images/1a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/ClusteringDistance.html" class="image image-full"><img src="images/2a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/FourInARow.html" class="image image-full"><img src="images/3a.jpg" alt=""></a>

        </div>
    </div>
    <div class="row">
        <div class="4u"> <a href="matthewpiatetsky.com/Fidelity.html" class="image image-full"><img src="images/4a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/Concordance.html" class="image image-full"><img src="images/5a.jpg" alt=""></a>

        </div>
        <div class="4u"> <a href="matthewpiatetsky.com/PhotoShare.html" class="image image-full"><img src="images/6a.png" alt=""></a>

        </div>
    </div>
</section>

注意：我尝试使用这些，但不确定是我做错了什么。 http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

Answer 1

实现此目的的代码如下所示：

a {
  position: relative
}

a span {
  display: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,.8);
}

a:hover span {
  display: block
}

<a>
  <img src="http://placehold.it/300x200">
  <span>caption</span>
</a>