The Best Open Source CSS and jQuery Image Captions

The use of image captions within HTML has been a long-standing tradition among web developers. Typically this involves the <figure> and <figcaption> elements, plus some additional CSS styles. Because of the large open source movement we can find even more great examples of plugins and starter scripts for building these image captions in your own projects.

I want to present a small collection of CSS and jQuery solutions for making HTML image captions. These solutions vary greatly in their methods and purpose, but all of them are worth consideration. Some developers need to implement a script into WordPress or Joomla!, while others can use static HTML. I am hoping this collection will offer a starting point for researching the topic and picking out an image caption codebase which works perfectly for your own needs.

CSS Image Captions

Building your own image captions with CSS effects can be tough. Sometimes it will require browser hacks and some extra syntax you do not recognize. But it also goes to show how much the current web design industry has advanced in just a short time period.

These examples are merely the best solutions I have found which provide a seamless image caption effect developed over CSS2 properties & CSS transition animations.

Label.css

I want to start by introducing label.css as one of the best CSS image caption libraries. This allows you to add class names onto captioned images which will then be updated in the HTML. You can force captions to appear anywhere over the image, even in the corners.

Plus the label.css library makes it easy to hide captions until the user hovers over an image. This technique is great because sometimes you will want captions to display as static text on the page, while at other times the hidden animation effects are more important.

Hongkiat Image Captions

What I like most about this Hongkiat article is that the various image captions will all be implemented using different CSS techniques. They are all coupled into one big caption gallery, and you can cherry pick out your favorite animations to build a brand new interface. The codes have all been tested within modern browsers and they support all of the major CSS prefixes.

However the biggest problem some users will have with this script is that it does not follow the figure/figcaption HTML structure. All of the caption content is held inside a span within a container div. Which obviously still renders perfectly fine, but it does not markup the exact type of content. But it only takes 5-10 minutes of updating the elements to get it working in a more formatted structure. Check out the live demo to see these captions in action.

Animated HTML5 Captions

The HTML5 figcaption example from Coalmarch is a beautifully simple CSS image caption tutorial. You can follow the steps in just a few minutes and have a brilliant layout displaying hidden captions upon hover. The script itself does include a small amount of jQuery, but it is completely plausible to replace this and use CSS transition effects instead.

Slide-In Image Captions

The CSS-Tricks blog is very well known amongst the web design community. Their tutorial on creating sliding image captions has been tested in a number of browsers and works flawlessly. I have been really impressed with this demonstration, not just because of the effects but also the standard HTML syntax. The figure and figcaption elements are not just implied for good measure. It is to help the browser differentiate context between the various page elements. Check out the live demo and see this effect for yourself.

jQuery Image Captions

The largest benefit to using jQuery is a much higher percentage of browser support. Anybody with JavaScript enabled should be viewing your image captions exactly the same as any other browser. CSS is just easier because some developers would rather not get into scripting. But these solutions are just as important and they contribute greatly into the frontend experience.

Caption.js

I just found Caption.js a little while ago and this library has stood out as an excellent source for web developers. The script will target images based on your own jQuery selector(classes, IDs, etc) and it will automatically include the figure and figcaption elements. This is crucial because the final page render will be displayed properly, along with the help of some CSS positioning. Caption.js is open source and free to contribute or download off Github.

jQuery.imageCaption

Now I would say jQuery.imageCaption is the perfect solution for developers running a CMS engine. This plugin is super easy to customize and quickly pulls out captions based on the image’s alt text. Similarly this will render out the figure and figcaption elements, which is great for SEO benefits.

By calling the function imageCaption() you do not need to pass any parameters into the call. This will still render properly on the page and you can apply this into any WordPress blog post. Similarly any classes added onto the img element will transfer to the containing <figure> element, which means you have a lot more control via CSS.

Captionate

Captionate is definitely an underrated open source project because of all the other solutions out there. It was developed by North Krimsly for use in various CMS engines. You can find a tutorial guide explaining the process to implement Captionate in your own website.

Basically you will write an HTML5 img element with the class .caption and this will get picked up by the jQuery script. The alt attribute text then gets transferred into a figcaption element and written into the HTML. Skim through the example page and you can see the Captionate syntax is rather minimalist in comparison to other solutions.

HCaptions

Delving into this final example I think HCaptions may hold a broader spectrum than just images. This jQuery plugin was developed for handling all caption content which can be rendered into HTML. Check out the live demo page and you will see a nice collection of examples. Similarly the various options allow you to control the speed and positioning of each caption. There are some better solutions for solely managing HTML images, but the HCaptions plugin does serve a terrific purpose for captioning other standard webpage elements.

Closing

You may be surprised at how resourceful these scripts can be. And when you are using valid HTML5 code it provides an even better opportunity for Google to crawl your pages and then index related context. If I have glossed over any fantastic scripts for image captioning please share with us in the post discussion area.