You can add a semi-transparent white on black caption to your images using simple CSS. The opacity of the caption background can be changed by modifying the alpha parameter in background-color’s rgba attribute.
<style> .image { width:600px; } .image .black { position: relative; left: 0; bottom: 60px; width: 100%; padding: 10px 20px; height: 40px; background-color: rgba(0, 0, 0, 0.6); filter: progid:DXImageTransform.Microsoft.gradient (startcolorstr=#7F000000,endcolorstr=#7F000000) 9; } .image .black a { color: white; font-size: 18px; text-decoration: none; outline: none; font-family:georgia; } .image .black .follow { margin-top: 5px; position: absolute; right: 10px; top:30px; font-size: 12px; font-family:verdana; } </style>
Instead of transparent backgrounds, you can even have fading gradients that transition from black to white much like the lower thirds in videos. Add this snippet to the CSS.
background: -webkit-gradient( linear, left bottom, left top, color-stop(1, rgba(0,0,0,0.0)), /* Top */ color-stop(0, rgba(0,0,0,1.0)) /* Bottom */ ); /* Gecko */ background: -moz-linear-gradient( center bottom, rgba(0,0,0,1.0) 0%, /* Bottom */ rgba(0,0,0,0.0) 100% /* Top */ );