html - 在悬停状态下显示的图像上的文字

Question

我试图在悬停状态 ( http://francescaponzini.com/kay/ ) 的图像上显示一些文本。到目前为止，我已经设法用 css 做到了。但是，我正在为定位而苦苦挣扎。我希望在用户将鼠标悬停在图像的任何点上时显示文本。我尝试使用绝对和相对位置但没有成功。

如果有意义的话，有没有办法让包含文本的 div 与图像具有相同的尺寸？

到目前为止，这是我的代码:

<a class="image_link" href="http://francescaponzini.com/kay/?p=106">
    <img src="http://francescaponzini.com/kay/wp-content/uploads/2014/06/Firstname.png" width="450" height="575" alt="" style="width: 243px;">      
    <div class="text-content">Place Name</div>
</a>

感谢任何帮助或提示!感谢所有人。

Answer 1

.image_link:hover .text-content {
    opacity: 1;
}