Super Simple jQuery Caption Hover Over Effect - jQuery Caption

Super Simple jQuery Caption Hover Over Effect - jQuery Caption
File Size: 608KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.