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;
}

Answer 2

更改包装链接的display并给出一个位置：

body.home .hentry > a {
    position: relative;
    display: block;
    ...
}

定位内容块并使其填充包装元素：

.text-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Remove width and height declarations */
    ...
}

显示在悬停状态的图像上的文本

2 个答案: