Image Captions Generated with CSS and jQuery

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" />

AJAX Post With jQuery and PHP

AJAX stands for Asynchronous JavaScript and XML. AJAX Post used to create faster, and more interacti…

How a Loop Through a JavaScript Object?

How a Loop through a JavaScript object?Javascript Objects are Variables Containing Variables.In Java…

How to Search Item in List in JavaScript

Multi Step Form Using HTML and JavaScript

Form is the important part in web design. Form is the primary interface to the user by which user is…

How to Create Custom CSS, jQuery Autocomplete Plugin

Web developers often use autocomplete features in websites as a part of their work. Yet lot of good …

How to Make Sticky Sidebar Using jQuery and CSS

Sticky sidebar is an essential part of web development. Not in all cases but for some cases where ou…