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/

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

@编辑

此代码来 self 的页面:

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

我的页面上的结果: