悬浮在图像上的文本与绝对位置

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/

我认为这可能会导致它，任何想法？

@edit

我的页面中的代码：

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

结果在我的页面上：

Answer 2

HTML：

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>

CSS：

#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

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

在此处查看演示：http://jsfiddle.net/liccyfuentes/D5UEW/

Answer 3

LOne的回答是正确的，但是如果没有你改变太多就行了。

HTML：

<div id="imgContainer">
    <li style="background-image:url('images/coffee_01.jpg')"><p>Some random text here...<p></li>
    <li style="background-image:url('images/coffee_02.jpg')"><p>Some random text here...<p></li>
    <li style="background-image:url('images/coffee_03.jpg')"><p>Some random text here...<p></li>
</div>

CSS：

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

#imgContainer li {
        margin: 0px 14px 0px 14px;
        width: 295px;
        height: 254px;
        list-style:none;
        background:#000;
}

#imgContainer li * {
        opacity:0; /* Visibility: hidden; works too! */
}

#imgContainer li:hover * {
        opacity:1; /* Visibility: visible; works too! */
}

Codepen：http://codepen.io/anon/pen/bzIGl