jQuery Tutorials & Plugins

This script have very simple usage;

Usage
Script:

$(document).ready(function(){
	$('img.captioned').each(
		function() {
			var caption = $(this).attr('title');
			$(this)
				.wrap('<div class="imgcontainer"></div>')
				.after('<div class="caption">'+caption+'</div>');
		}
	);
});

CSS:

.imgcontainer {
	position:relative;
	float:left;
	}
.caption {
	position:absolute;
	bottom:0;
	left:0;
	text-align:center;
	background:#fff;
	width:100%;
	opacity:.75;
	filter:alpha(opacity=85);
	color:#000;
	}
.imgcontainer img {display:block;}

HTML:

<img src="images/news1.jpg" class="captioned" alt="" title="jQuery blog News#1" />
<img src="images/news2.jpg" class="captioned" alt="" title="jQuery blog News#2" />

Demo