Animated jQuery Image Caption On Hover Plugin - Capty

Capty is a jQuery plugin for creating animated caption over an image when hover over. The idea is to slide up or fade into the caption when the user hovers over the image. It also has some options to make the caption fixed or hidden.

See also:

• Animated jQuery Image Caption Overlay Effects Plugin - HCaptions
• Sticky Image Captions with jQuery
• Amazing Thumbnail Zoom Plugin With Sliding Captions

How to use it:

1. Include jQuery library and jQuery Capty plugin on the web page

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

2. Insert a image to your web page

<img id="animation" src="img/image.jpg" alt="" />

3. The CSS for the image caption

div.capty-caption {
background-color: #000;
color: #FFF;
font: bold 11px verdana;
padding-left: 10px;
padding-top: 7px;
text-shadow: 1px 1px 0 #222;
}
div.capty-caption a {
color: #318DAD;
font: bold 11px verdana;
text-decoration: none;
text-shadow: none;
}

4. Call the plugin with options

<script type="text/javascript">
$(function() {

$('#animation').capty({
animation: 'fade', // The captions animation type: 'slide', 'fade' or 'fixed'.
speed:400, // The speed in which caption will appear and disappear.

});

});
</script>

5. All options

animation:    'slide' // The captions animation type: 'slide', 'fade' or 'fixed'.
cCaption:     'capty-caption' // The class name of the wrapper caption.
cImage:       'capty-image' // The class name of the wrapper image.
cWrapper:     'capty-wrapper' // The class name of the wrapper image and caption.
height:       30 // The height of the caption.
opacity:      .7 // The opacity of the caption.
prefix:       '' // The text/html that will be applied at the beginning of the legend.
speed:        200 // The speed in which caption will appear and disappear.
sufix:        '' // The text/html that will be applied at the end of the caption.

---

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