css image with overlay text or image

                        
                          /*************Image with overlay Start****************/

div.submission{  
    float:left; /* important */  
    position:relative; /* important(so we can absolutely position the description div */  
} 

.submissionoutter {
    float: left;
    padding-left: 8px;
    padding-right: 8px;
}


div.description {
    position: absolute;
    bottombottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #89d9d0;
    font-family: 'tahoma';
    font-size: 15px;
    color: white;
    opacity: 0.6;
    filter: alpha(opacity=60);
    top: 0px;
    height: 200px;
}

p.description_content {
    padding: 10px;
    margin: 0px;
    font-family: bebasnuebold;
    font-size: 42px;
    color: #ffffff;
    float: left;
    position: absolute;
    top: 54px;
    width: 100%;
}

/*************Image with overlay End****************/                        
                        

                        
                          <!-- Submission div Start -->  
<!--div class='submissionoutter'-->
<!--div class='submission'-->  
    <!-- image -->  
   <!--img src code here-->
 
    <!-- description div -->  
    <!--div class='description'-->  
        <!-- description content -->  
          
        <!-- end description content -->  
    <!--/div>  
	<!--p class='description_content'>Feature Wedding -->
    <!-- end description div -->  
<!--/div-->  
<!--/div--> 
<!-- Submission div end -->