jQuery Topics

30 Text Captions Overlay Image Plugins

We all know the saying “a picture can tell a thousand words”, this may be true, but sometimes it is important to show captions on images to give more details. And once again with the use of jQuery, we can make fantastic text overlay effects that occurs when you mouseover the image. Displaying captions this way can also save web page space at the same time. We bring you 30 Text Captions Overlay Image Scripts & Plugins, hopefully there is one that catches your eye! Enjoy!

1. Overlay Text over an Image with a Very Simple jQuery Snippet


This post will show you how much jQuery is helpful to give a trendy face of the presentation of your images. There are some developers who want only to put fixed text messages above the images. But there are others who like to add some spices to their images look.
Overlay-Text-over-an-Image-with-a-Very-Simple-jQuery-Snippet.jpg
Source
Demo

2. jQuery Capty


Is a plugin that creates captions over the images.
jQuery-Capty.jpg
Source & Demo


3. jQuery Image Overlay Plugin


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, as you can see below.
jQuery-Image-Overlay-Plugin.jpg
Source
Demo

4. Hover Image Text


This project allows you to create images along with descriptive text that is displayed on mouse over, similar to a tool hip, however the text is overlayed over the image.
Hover-Image-Text.jpg
Source
Demo

5. Mosaic


Sliding Boxes and Captions jQuery Plugin
Mosaic.jpg
Source
Demo

6. Beautiful Image Captions with jQuery Captify Plugin


Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer.
Beautiful-Image-Captions-with-jQuery-Captify-Plugin.jpg
Source
Demo

7. Image Captions


Adds caption to images. Captions are pulled from the alt tag or the html for a specified element. Still only version 0.1, this is more a proof of concept then a production version.
Image-Captions.jpg
Source

8. jCaption


Is a jQuery plugin designed to make adding captions to a page dead simple. It takes an image element and uses one of its attributes to build the markup for a caption.
jCaption.jpg
Source
Demo

9. JQuery hover caption plugin


A simple jQuery plugin that adds both a caption and a gray-out effect when hovering over an image.
JQuery-hover-caption-plugin.jpg
Source & Demo

10. jQuery Captify (v1.1.3)


Small/simple, and completely ready for use in production environments.
jQuery-Captify-v113.jpg
Source & Demo

11. Making Image Captions using jQuery


In this tutorial we will make a nice semi-transparent image caption using jQuery. The image caption will be triggered on hover.
Making-Image-Captions-using-jQuery.jpg
Source
Demo

12. How to create an image caption with jQuery


This image caption is not a plugin – It merely allows you to understand how a jQuery image caption would be created.
How-to-create-an-image-caption-with-jQuery.jpg
Source
Demo

13. jSquares for jQuery


Is a jQuery plugin that pops up an image and a description in an overlay on hover.
jSquares-for-jQuery.jpg
Source
Demo

14. Boxy


Provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.
Boxy.jpg
Source
Demo

15. jCapSlide: A jQuery Image Caption Plugin


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.
jCapSlide-A-jQuery-Image-Caption-Plugin.jpg
Source
Demo

16. jQuery Drop Captions Plugin


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.
jQuery-Drop-Captions-Plugin.jpg
Source
Demo

17. Animated image Caption for WordPress with jQuery


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).
Animated-image-Caption-for-WordPress-with-jQuery.jpg
Source
Demo

18. jQuery Image ‘Wrap’ Captions


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.
jQuery-Image-Wrap-Captions.jpg
Source & Demo

19. Create a Thumbnail with Fading Caption Using jQuery


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.
Create-a-Thumbnail-with-Fading-Caption-Using-jQuery.jpg
Source
Demo

20. Flash plugin: Captions


You can supply the Captions information as an external text file or embed them inside an mp4 container.
Flash-plugin-Captions.jpg
Source

21. EasyImageCaption


A plugin generates captions from images’ TITLE or ALT tags in articles and displays them below (or above) the images. It has been developed as an alternative to Joomla!’s built-in javascript caption solution as well as to the JCE editor’s caption plugin.
EasyImageCaption.jpg
Source
Demo

22. iCaptionate: automatic image captions


It can automatically caption any images you want, without adjusting the page layout as they float or dropdown and uses the title attribute for the caption!
iCaptionate-automatic-image-captions.jpg
Source
Demo

23. jQuery Footer Caption


Adds a footer caption on an image, div box or other any DOM element. You can set some options for use a custom text too.
jQuery-Footer-Caption.jpg
Demo

24. jquery.pictext


Creates an overlay with a caption to images from the tag’s title or alt text.
jquerypictext.jpg
Source

25. JQuery Stack Banner Slideshow with Captions


Use this sexy and stylish banner slideshow to spice up your website.
Features:
> 2 version layout (vertical and horizontal).
> 2 directional movement (forward and backward).
> Adjust image size and borders.
> Unlimited captions allowed.
> Captions can be linked.
> Adjust drop shadows.
> Adjust slideshow speeds and rotation angles.
> Adjust caption opening speeds and delays.
> Auto starts slideshow.
> Cool circle filling pre loader included.
> Installation instructions included.
> Rotation supported even in old Internet Explorer versions.
JQuery-Stack-Banner-Slideshow-with-Captions.jpg
Source
Demo

26. jQuery Doom Carousel Plugin


Here comes jQuery Doom Carousel with the ability of the jQuery Easing plugin integration.
jQuery-Doom-Carousel-Plugin.jpg
Source
Demo

27. jQuery plugin: captionate images


jQuery plugin that adds a caption to the bottom of images this is useful for displaying additional text about images when a user hover over the image.
jQuery-plugin-captionate-images.jpg
Source
Demo

28. CSS3 Image & Text Overlay


This plugin allows you quickly make a rollover overly for an image.
CSS3-Image-Text-Overlay.jpg
Source
Demo

29. Making Image Overlay Caption Using CSS


Making Image Overlay Caption Using CSS
Making-Image-Overlay-Caption-Using-CSS.jpg
Source
Demo

30. jQuery Feature Carousel


This plug-in was intended to be used to display feature stories on a home page of a website, but can be used for any reason and is highly customizable. It will always display three images at the same time, with all the rest hidden behind the center image.
jQuery-Feature-Carousel.jpg
Source & Demo

Read the full/original article at jQuery4u

    Related Posts

    Comments are closed.

    jQuery Resources

    Learn more about jQuery

    jQuery News & Links

    I only just found out that the jQuery validation plugins has a validation rule called “remote” which can be used ...

    jQuery function to check if horizontal scroll is present – hasHScrollBar() – (or vertical check below also, util function to ...

    jQuery function to Set any DOM Element to Top View (bring to front) using CSS Z-Index property.

    Is it possible to declare arrays in JavaScript object literal notation? Example 1 – this works with arrays Declaration: Storage ...

    To get the a variables type using jQuery there is a jQuery function called .type() which returns “array”, “string”, “number”, ...

    In this post you can find tutorials which explain step by step different API use cases with jQuery like Google ...

    For valuable work on creation of sites you need a good comfortable editor necessarily. There are many requiring paid products ...

    Today we are sharing with you a collection of awesome jQuery Camera Photo plugins. They offer a range of image ...

    Back in the day, if you saw something that was animated on a website it was automatically assumed to be ...

    In this post, we have compiled a list of 10 jQuery HTML5 Audio players available today, most allow native audio ...

    jQuery Mobile is a powerful framework for making mobile web applications. But can we use it to convert existing desktop ...

    I have jotted a quick post on a Basic JavaScript Regular Expression Example to give beginners out there a taste ...

    In April 2012′s edition of Interestingly Random JavaScript, jQuery and Web Development we bring you some very cool stuff such ...

    In this post we are sharing you a roundup of 10 really jQuery plugins as of today. Pretty cool plugins ...

    As always expected from the jQuery community, the compilation we have for you today are some good and impressive recently ...

    A collection of jQuery PNG/JPEG/GIF plugins that enables image animation, cartoon-like background, etc… let them help you design displays for ...

    A collection of JavaScript/jQuery Zip/File/Compressor plugins that allows you to minify your JS code and compress your JS files ready ...

    Quick jQuery code snippet on how to keep an element in view. For demo scroll down on any page on ...

    Here is what I think is the best and most reliable way to load jQuery library and jQuery UI Libraries. ...

    jQuery code snippet which outputs all attributes of element using the default .attr() function on any dom element(s). usage: output:

    More Links & News

    Community Resources

    Use jQuery and the Google Maps API to create your own map application.

    Super cool and easy way to get stylish tooltips with jQuery.

    The right way to include the jQuery library in WordPress.

    Share a resource