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.