Chat with us, powered by LiveChat

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.

.image {
.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;
.image .black .follow {
  margin-top: 5px;
  position: absolute;
  right: 10px;
  font-size: 12px;


<div class="image">
  <img src="img.png">
  <div class="black">
    <a href="#">
      Image Caption
    <a href="#" class="follow">
      Image Credit &rarr;

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(
    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 */