Super Simple jQuery Caption Hover Over Effect - jQuery Caption

jQuery Caption is an extremely simple and lightweight jQuery plugin for creating animated image caption hover effects with one line of javascript. The idea is to add figure and figcaption classes to your image and use the image's ALT attribute to supply the caption text.

See also:

• Animated jQuery Image Caption Overlay Effects Plugin - HCaptions
• Sticky Image Captions with jQuery
• Amazing Thumbnail Zoom Plugin With Sliding Captions
• Animated jQuery Image Caption On Hover Plugin - Capty
• jQuery Animated Image Cation with HTML5 Figcaption
• Animated Image Caption Hover Effects with CSS3 and HTML5

How to use it:

1. Include jQuery library and jQuery Caption on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery.caption.js" type="text/javascript"></script>

2. Insert an images to your web page

<div class="demo"> <img src="img/demo.jpg" alt="Image Caption Text" /> </div>

3. The CSS for the image caption text

.figure{
	position:relative;
	margin:0;
	padding:0;
}
.figcaption{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:100px;
	background-color:#eee;
	opacity:0.5;
}

4. Initialize the plugin

$(document).ready(init);
function init(){
$('.demo img').caption();
}

---

This awesome jQuery plugin is developed by louisbros. For more Advanced Usages, please check the demo page or visit the official website.