css - 具有绝对位置的图像上的悬停文本

Question

在图像上您可以看到 3 张图片，我希望它们与文字一起悬停。我对所有这些 CSS 东西都很陌生。将鼠标悬停在三个图像中的一个上后，会出现文本，我的问题是我尝试了很多方法，也许错误在于绝对位置？

HTML:

<div id="imgBackground"></div>
<div id="imgContainer">
    <img src="images/coffee_01.jpg" />
    <img src="images/coffee_02.jpg" />
    <img src="images/coffee_03.jpg" />
</div>

CSS:

#imgBackground {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: rgb(244,244,244); }

#imgContainer {
    position: relative;
    margin: auto;
    width: 980px;
    padding: 30px; }

#imgContainer img {
        margin: 0px 14px 0px 14px;
        width: 295px;
        height: 254px;    }

Answer 1

谢谢你们，但是你们的回答对我帮助不大。

正如您在这段代码中所看到的，我试图稍微抓取我需要的内容，但请注意并将鼠标移动到空白处的图片下方，它也会悬停。如何解决这个问题？

#wrapper .text {
position:relative;
bottom:221px;
left:0px;
width: 300px;
height: 200px;
background: rgba(0,0,0, .4);
text-align: center;
text-height: 50px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

这是我的更新:

http://jsfiddle.net/D5UEW/2/

我认为这可能会导致它，有什么想法吗？

@编辑

我页面中的这段代码:

.imgContainer {
    position: relative;
    margin: auto;
    width: 295px;
    height: 254px;
    padding: 30px;
    float: left;
}

.imgWrapper .text {
    position:relative;
    bottom:274px;
    top: 10px;
    width: 295px;
    height: 254px;
    background: rgba(0,0,0, .4);
    text-align: center;
    visibility:hidden;
}

.imgWrapper:hover .text {
visibility:visible;
}

结果在我的页面上: