Image Captioning Tool

Welcome to the CSSRule captioning tool. This utility will allow you to preview the CSSRule jQuery plug-in for transparent image captions. You can try it out by pressing the "Preview" button below, then customize with your own image and settings. When you are happy with the result download the two plugin files, and cut and paste the code.

You can visit the CSS Rule Blog for a comprehensive CSS guide.

Generate a Semi-Transparent Image Caption:

Enter URL of your Image:

Enter Caption Text:

Background Color of the Caption Box (hex code like #ffffff, or CSS color name):

Color of the Caption Text (hex code like #00000, or CSS color name):

Opacity of the Caption Box (e.g. 0.7):

Width to use for displaying the image (e.g. 560px, 10rem, 100%):

Percent of Height While Not Hovering (e.g. 10% to 90%): %

Milliseconds to Show Whole Image:

URL of Audio to Play on Hover (e.g. http://robtowns.com/music/blind_willie.mp3):

Center the image

Center the caption

Round Corners (CSS3 capable browsers only)

Hide Caption Until Mouse Over

Show Caption at Top of Image

Download Files

You'll need these three files

A version of jQuery: jQuery-1.3.1.min.js
The plugin code: jquery.cssbakery-captions.js
The style sheet: cssbakery_captions.css

First Time Use Code Snippet:

You only need to paste this once into your page (e.g. in the head section):

<!-- link in your favorite verion of jQuery (Only add this if you are not already pulling in jQuery): -->
<script src='jquery-1.3.1.min.js' type='text/javascript'></script>

<!-- Make these two lines point to where you downloaded the plugin files -->
<link type='text/css' rel='stylesheet' href='cssbakery_captions.css'>
<script src='jquery.cssbakery-captions.js' type='text/javascript' ></script>

Then put this into the body of your page (optionally you can also put the script in the head section or just before your ending body tag):

<script type='text/javascript'>
$(window).load(function(){ $('#captioningflower2jpg').cssBakeryCaption({'opacity':'0.3','center':true,'centerCaption':true,'round':true,'color':'white','width':'auto','height':'100','speed':1000,'bgcolor':'white'});
});
</script>

<img id='captioningflower2jpg' style='display:none;' src='http://pics.cssrule.com/pics/captioningflower2.jpg' alt='Farmers Market Orchid<br>&copy; 2022 Copyright • www.cssrule.com • All Rights Reserved'>

If You are Adding Another Captioned Image:

To add a second image, you don't need to re-paste all the code above. Instead, find this existing line:

$(window).load(function(){

then add this line right afterward:

$('#captioningflower2jpg').cssBakeryCaption({'opacity':'0.3','center':true,'centerCaption':true,'round':true,'color':'white','width':'auto','height':'100','speed':1000,'bgcolor':'white'});

and then add the new img tag in the body of your page:

<img id='captioningflower2jpg' style='display:none;' src='http://pics.cssrule.com/pics/captioningflower2.jpg' alt='Farmers Market Orchid<br>&copy; 2022 Copyright • www.cssrule.com • All Rights Reserved'>

Visit the CSS Rule Blog