Hovered text on image with absolute position - css

Question

On image you can see 3 pictures, i want them to be hovered with text.
I'm pretty new in all of this CSS thingies. After you hover on 1 of three image text will appear, my problem is that i tried many thing, maybefault lays in position absolute?
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

Thanks guys but your answers haven't helped me much.
As you see in this code i tried to scretch a bit what i need, but take attention and move your mouse under the imgage on white space, it also hovering. How to fix this problem?
#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;
}
Here's my update:
http://jsfiddle.net/D5UEW/2/
I think this might cause it, any ideas ?
#edit
This code from my page:
.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;
}
And result on my page:

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/

Answer 3

LOne's answer is correct, but this works without you changing to much.
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