https://github.com/coryschires/hover-caption

Simple jQuery plugin that adds both a caption and a gray-out effect when hovering over an image.
https://github.com/coryschires/hover-caption

Last synced: 8 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/coryschires/hover-caption
• Owner: coryschires
• Created: 2010-02-05T05:26:27.000Z (over 15 years ago)
• Default Branch: master
• Last Pushed: 2011-09-03T21:05:16.000Z (about 14 years ago)
• Last Synced: 2024-10-28T05:12:54.107Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://coryschires.com/jquery-hover-caption-plugin/
• Size: 171 KB
• Stars: 26
• Watchers: 4
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.rdoc

Awesome Lists containing this project

README

          
= JQuery hover caption plugin.

http://coryschires-blog-post-images.s3.amazonaws.com/hover_caption_plugin.jpg

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}[http://coryschires.github.com/hover-caption/].

== How to make it work.

Drop these scripts in your header:

   

   

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.