CSSBakery Image Captioning Tool

Welcome to the CSSBakery captioning tool. This utility will allow you to preview the CSSBakery 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 Bakery Blog for a comprehensive CSS guide.

Generate a Semi-Transparent Image Caption:

%


Download Files

You'll need these three files


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','height':'100','speed':1000,'bgcolor':'white'});
});
</script>

<img id='captioningflower2jpg' style='display:none;' src='http://pics.cssbakery.com/pics/captioningflower2.jpg' alt='Pink Orchid<br>&copy; 2017 Copyright www.cssbakery.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','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.cssbakery.com/pics/captioningflower2.jpg' alt='Pink Orchid<br>&copy; 2017 Copyright www.cssbakery.com All Rights Reserved'>

Visit the CSS Bakery Blog