10 Stylish jQuery caption plugins

A caption is defined as the text block that appears below an image. The image caption is usually used to give more details about an image/photo.
With the use of jQuery we can make a text overlay effect that occurs when you mouse over an image, thus saving space at the same time in our website.
There are ten stylish jQuery caption plugins listed bellow, which you can freely use in your future work.
Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments. Also, it’s only 2.3kb!

Here is a new plugin for creating nice sliding captions for images. When hovering over the image, the caption appears and the image gets a semi-transparent color overlay.

Drop captions takes an image’s title attribute and converts it into a caption that appears only when the mouse is moved over the image. It’s also totally degradable if the user has JavaScript disabled; the title attribute will still display the exact same text.

Learn how to make a nice semi-transparent image caption using jQuery in this tutorial. The image caption will be triggered on hover. We are going to use fadeTo() jQuery function to achieve the semi-transparency. It’s a really nice effect to have.

Learn how to make a sliding image caption using with a very simple jQuery snippet. The image annotation will appear when the user hovers over the image.

The image overlay plugin is a simple jQuery plugin that attempts to present an image with an overlaid title/caption. The overlay drops in on hover.

The image caption has been implemented in Wordpress for now. Learn in this tutorial how to manipulate the image caption so it appears only on mouseover. (The original article is written in German, use google translator to translate it to english).

Simply place some text in the title attribute and give the image class=”captionme” and you will get lovely “wrap-around” captions which compliment your inline images.

This tutorial will show you how to create a fading caption for your thmbnail gallery. It uses jQuery framework and CSS to create this transparent and fading effect.

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









User Comments
Slobodan Kustrimovic
On February 11, 2010 at 9:42 am
Thanks for including my tutorial. Number 4.
admin
On February 11, 2010 at 11:43 am
Thank you Slobodan for your excellent tutorial! Looking forward for more stuff from you. Cheers!
bill
On February 12, 2010 at 1:28 pm
Nice roundup. A lot of them seem to duplicate the same function of covering up the image with the caption. Except for #3 which drops it out of the way, below the image.
Kevin Mist
On February 20, 2010 at 9:49 am
Thanks for this.. I was just searching for one of these for my most recent project. I think I will try out the #3 as well as it does not cover the image..
K
Post Comment