Image and description inside DIV - css

Question

I'm trying to put an image and its description at the bottom of the image (and over the image with the opacity 0.8). Both the elements are inside a div element. But enable display the title.
.title {
opacity:0.8;
background-color:black;
color:white;
height:40px;
width:100%;
position:relative;
bottom:0px;
z-index:2;
clear:both;
}
.tilebg {
position:relative;
top:0px;
height:100%;
z-index:0;
opacity:1;
}
I've made a fiddle with example

Answer 1

Here's how positioning works:
position:relative - this sets the current element as the origin point (0,0)
position:absolute - this sets the position of an element in respect to its origin. If the parent has position:relative, that becomes the origin. Otherwise, it goes up the HTML tree until it finds one, defaulting to BODY if none is defined.
So: parent = relative, child = absolute
.item {
opacity:1;
background-color:grey;
margin:20px;
margin-left:20px;
width:200px;
height:200px;
position:relative;
background-image:url(http://i.imgur.com/vdDQgb.jpg);
}
.title {
opacity:0.8;
background-color:black;
color:white;
height:40px;
width:100%;
position:absolute;
bottom:0px;
z-index:2;
clear:both;
font-size:12px;
}

Answer 2

I would encourage you to use the new figure and figcaption elements since they were created for this very purpose:
<figure>
<img src="http://placekitten.com/300/200" />
<figcaption>This is the caption.</figcaption>
</figure>
​With the following CSS:
figure {
width: 300px; height: 200px;
position: relative; /* Permits placement figcaption absolutely */
}
figcaption {
position: absolute;
bottom: 0; left: 0; width: 100%;
background: rgba(0,0,0,.8); /* Semi-transparent background */
}
Demo: http://jsfiddle.net/qu4a3/1/