Setting overlay text on Image

Setting overlay text on Image

Hi,

I have a image library which has the following metadata. Header1,Header2,SubCaption, Url, Url text

I want to show the metadata information on top of the image. Example Image below:
 
I have used a third party plugin(basic slider - http://basicslider.com/),
 
My current UI is as below:
 
  1. <script type="text/javascript" src="/Scripts/bjqs-1.3.js"></script>
    div id="banner-fade">
        <ul class="bjqs">
            <li><!-- Images --></li>       
        </ul>
    </div>




  2. jQuery(document).ready(function($) {
        $('#banner-fade').bjqs({
            'height' : 320,
            'width' : 620,
            'responsive' : true
        });
    });






  3. pictureArray = new Array();  
        var pictureCount = 0;   
        var enumerator = this.pictures.getEnumerator();   
        while(enumerator.moveNext())   
        {     
            var currentItem = enumerator.get_current();
            var filename = currentItem.get_item('FileLeafRef'); 
            var dir = currentItem.get_item('FileDirRef');    
            var caption1 = currentItem.get_item('ImgHeaderCaption1');
            var caption2 = currentItem.get_item('ImgHeaderCaption2');
            var subcaption = currentItem.get_item('ImgSubText');
            var subUrl = currentItem.get_item('ImgURL');
            var subUrlText = currentItem.get_item('ImgURLText');
            filename = dir + '/' + filename;
            pictureArray[pictureCount++] = filename;
        }















  4.     var newHtml = '';
        var itgdispval = "block";    
        //iterate through the result and create HTML code for each picture
        for(var i = 0; i < this.pictureArray.length; i++)   
        { 
            var li = document.createElement("li");
            li.innerHTML="<img src='"+this.pictureArray[i]+"' />";
            var ul = document.getElementById("banner-fade").getElementsByTagName("ul")[0];
            newHtml += ul.appendChild(li);     
             
        }   
        //store the number of images  
        itgImgRotCount = i;        
        //start the iterator
        itgImgRotIter++;    
        //assign the HTML to the rotator container
        $('#banner-fade').html(newHtml);  















How to add the metadata over the Image?
 
Thanks