The use of image captions within HTML has been a long-standing tradition among web developers. Typically this involves the
<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 CSS3 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.
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 & CSS3 transition animations.
I want to start by introducing label.css as one of the best CSS3 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.
What I like most about this Hongkiat article is that the various image captions will all be implemented using different CSS3 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 CSS3 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.
The HTML5 figcaption example from Coalmarch is a beautifully simple CSS3 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 CSS3 transition effects instead.
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.
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.
The Capty plugin is a bit different from Caption.js in that the default settings will hide your initial text. As users hover the image it will slide up or fade into the caption, then re-hide once the user is not hovering anymore. It’s great because you actually have the option to keep this caption fixed or hidden, plus a myriad of additional plugin options.
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.
jQuery.caption is another solution with a very simple initiation. Many of these jQuery plugins are plug-and-play where you just need to initiate the function by targeting all of your captioned images. Naturally the jQuery.caption plugin will automatically implement figure and figcaption elements, plus you may customize the caption text with HTML elements. The project’s Github page delves into greater detail about the various options you might want to use.
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.
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.
I know there many be plenty of other similar scripts available and lots of others will surely be released as time goes on. But as for moving into 2013 I feel there are more than enough solutions to generate valid image captions in any website. 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.
You might also like…
- 50 Most Useful jQuery Plugins from 2012
- Top 50 Useful jQuery Plugins from 2011
- Our 50 Favorite Web Developers Resources and Tools from 2011
- 50 Free Tools and Apps for Web Designers and Developers