
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 */
);