Image Captions Generated with CSS and jQuery
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
