JQuery hover caption plugin.

Here’s a simple jQuery plugin that adds both a caption and a gray-out effect when hovering over an image. View the live demo.

How to make it work.

Drop these scripts in your header:

<script src="jquery-1.6.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.hover_caption.js" type="text/javascript" charset="utf-8"></script>

Call the plugin function on your images:

$(document).ready(function() {
   $('img').hover_caption();
});

Add this tiny bit of CSS somewhere:

.hover_caption {
   /* If you can count of CSS3 support: */
   background-color: rgba(0, 0, 0, 0.7);

   /* Or use a transparent image if you need to support bad browsers: */
   /* background-image: url(hover_caption_bg.png); */

   /* NOTE: If you're img elements have paddings or margins you'll need to
   match them here to get things lined up properly. */
}

Configuration options.

And here’s some configuration options:

$('img').hover_caption({
   caption_font_size: '18px',
   caption_color: 'white',
   caption_bold: true,
   caption_default: "Click for screenshots."
});

Smart captions.

If your image has a title attribute, the plugin will use that as the caption. Otherwise it will default to “Click for screenshots”. You can change the default if you like, of course.