There are times when, instead of placing the caption to your photo below it, you might want to overlay it.

You can accomplish this in a relatively simply way by first adding the following to your list of styles:

div.img-left {float:left;position:relative;display:inline;padding:0;margin:0;margin-right:20px;}
div.img-right {float:right;position:relative;display:inline;padding:0;margin:0;margin-left:20px;}
div.img-center {position:relative;display:inline;padding:0;margin:0 auto;}
p.caption {position:absolute;bottom:-10px;left:0;width:100%;background-color:black;font-size:0.7em;color:white;opacity:0.5;filter:alpha(opacity=50);padding:0px;margin:0;text-align:center;}
p.caption a:link,p.caption a:visited {text-decoration:none;color:#fff;}
p.caption a:hover,p.caption a:active {text-decoration:underline;color:#fff;}

And the apply it in HTML as follows:

<div class='img-left'>
<img src='http://lorempixel.com/300/200/' />
<p class='caption'>&copy; 2012 LoremPixel.com</p>
</div>

You can also use the "img-right" or "img-center" class to position the image to the right or centre it.

The result is:

© 2012 LoremPixel.come

Warning in WordPress: By default, WordPress adds extra code. If your caption is ending up below the image, remove all carriage returns and leave the code on a single line. Also note that the Visual Editor may also mess around with the formatting as you save the code. Always go back to check it after you've saved your page.

Related Posts: