.photo {
    /* relative position, so that objects in it can be positioned inside this container */
    position:relative;
    font-family:arial; 
     
    /* hide those extra height that goes beyong the size of this container */
    overflow:hidden;
    border:5px solid #000;
    width:300px;
    height:186px;
}  
 
    .photo .heading, .photo .caption {
        /* position inside the container */
        position:absolute;
        background:#000;
        height:50px;
        width:300px;
         
        /* transparency for different browsers */
        /* i have shared this in my CSS tips post too */
        opacity:0.6;
        filter:alpha(opacity=60); 
         -moz-opacity:0.6;   
        -khtml-opacity: 0.6; 
 
    }
     
    .photo .heading {
         
        /* hide it with negative value */
        /* it's the height of heading class */
        top:-50px;
    }
 
    .photo .caption {      
        /* hide it with negative value */
        /* it's the height of bottom class */
        bottom:-50px;      
    }
     
 
    /* styling of the classes*/
    .photo .heading span {
 
        color:#26c3e5; 
        top:-50px;
        font-weight:bold;
        display:block;
        padding:5px 0 0 10px;
    }
     
    .photo .caption span{
        color:#999;
        font-size:9px;
        display:block;
        padding:5px 10px 0 10px;
    }