Skip to content

Simple jQuery plugin that adds both a caption and a gray-out effect when hovering over an image.

Notifications You must be signed in to change notification settings

coryschires/hover-caption

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Simple jQuery plugin that adds both a caption and a gray-out effect when hovering over an image.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published