悬停状态下显示的图片上的文字

我试图让悬停状态下的图片显示一些文字（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>

知道的任何帮助或暗示感谢所有。

来源

2014-07-20 user2834426

请出示的相关CSS问题 – Popnoodles

我写了一个类似问题的答案[这里]（http://stackoverflow.com/questions/24794985/jquery-is-it-possible-to-use-slideup-and-append-text-at-the -same时间/ 24795314＃24795314）。如果你不想过渡，那么你需要的唯一CSS就是'#parentDiv：hover #description {display：block}'和'#description {display：none;}'，以及'＃description'的正确位置。 – royhowie

他必须从.text-content中删除'opacity：0'。 –

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

来源

2014-07-20 15:44:44 smistry

这个作品呢！非常感谢 – user2834426

更改包装环节的display并给予postition：

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 */ 
    ... 
}

来源

2014-07-20 15:47:36 JoeJ

我觉得我可能误解了“是否有一种方法让包含文本的div假定图像具有相同的维度”... – JoeJ

我想让位于悬停状态的文本显示为中心在图像内 - 这就是为什么我认为我需要div .text-content成为image_link的同一维度。但我可能是错的... – user2834426

悬停状态下显示的图片上的文字

回答

相关问题