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.
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. */
}
And here’s some configuration options:
$('img').hover_caption({
caption_font_size: '18px',
caption_color: 'white',
caption_bold: true,
caption_default: "Click for screenshots."
});
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.