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

结果在我的页面上：

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

代码笔： http ://codepen.io/anon/pen/bzIGl