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

时间:2014-07-20 15:29:23

标签: html css hover

我正在尝试在悬停状态(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>

任何帮助或提示都表示赞赏!感谢所有人。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

更改包装链接的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 */
    ...
}