This script have very simple usage;
Usage
Script:
01 $(document).ready(function(){
02 $('img.captioned').each(
03 function() {
04 var caption = $(this).attr('title');
05 $(this)
06 .wrap('<div class="imgcontainer"></div>')
07 .after('<div class="caption">'+caption+'</div>');
08 }
09 );
10 });CSS:
01 .imgcontainer {
02 position:relative;
03 float:left;
04 }
05 .caption {
06 position:absolute;
07 bottom:0;
08 left:0;
09 text-align:center;
10 background:#fff;
11 width:100%;
12 opacity:.75;
13 filter:alpha(opacity=85);
14 color:#000;
15 }
16 .imgcontainer img {display:block;}HTML:
1 <img src="images/news1.jpg" class="captioned" alt="" title="jQuery blog News#1" />
2 <img src="images/news2.jpg" class="captioned" alt="" title="jQuery blog News#2" />