CSS Image Captions with Gradients and Transparent Backgrounds

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>


  
  

    
      Image Caption
    
    
      Image Credit →
    
  

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