Basic HTML5 Image Caption Plugin For jQuery - Caption.js

File Size: 2.63 KB
Views Total: 1506
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Basic HTML5 Image Caption Plugin For jQuery - Caption.js

Caption.js is a dead simple jQuery plugin that allows you to add an HTML5 image caption (description, copyright, credit information) to any image with just one JS call.

How to use it:

1. Place both jQuery JavaScript library and the jQuery caption.js script at the end of your html document.

<script src="//"></script>
<script src="jquery.caption.js"></script>

2. Add a custom caption to your image as this:


3. This will wrap your image into the HTML5 figure element and generate an image caption overlay using the figcaption tag:

  <img id="demo" src="">

4. Style the image caption overlay whatever you like:

.container figure {
  position: relative;
  border: 3px solid #fff;

.container figcaption {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0.75em;
  text-align: center;
  background: rgba(0, 0, 0, 0.64);

This awesome jQuery plugin is developed by gerayzade. For more Advanced Usages, please check the demo page or visit the official website.