css - 絶対位置で画像にホバーされたテキスト

Question

画像では3枚の写真を見ることができますが、それらをテキストでホバーしたいです。私は、このすべての CSS のことでかなり新しいです。3 つの画像テキストのうちの 1 つにカーソルを合わせると、私の問題は、私が多くのことを試したことです。

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

check demo here : http://jsfiddle.net/liccyfuentes/D5UEW/