Image and description inside DIV

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