How to create image caption in CSS

Image Caption

Almost all famous news websites always display images with a caption box that is aligned at the bottom of the same image. These image captions provide extra information about the images displayed on the web pages. You can quickly add these types caption over image in your images using CSS and HTML.

Caption on bottom side of image

The following CSS code display caption text below the image.

Caption goes here

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .imageHolder {
      position: relative;
      width: 285px;
      height: 175px;
    }
    .imageHolder .caption {
      position: absolute;
      width: 283px;
      height: 50px;
      bottom: 0px;
      left: 0px;
      color: #ffffff;
      background: green;
      text-align:center;
      font-weight:bold;
      opacity:0.7;
    }
  </style>
</head>
<body>
  <div class="imageHolder">
  <img src="img/caption4.jpg" alt="" />
  <div class="caption"><br>Caption goes here</div>
  </div>
</body>
</html>

Caption on top side of the image

The following CSS code shows the caption overlay on the top side of the image

Caption goes here

Source Code

<style type="text/css">
  .imageHolder {
    position: relative;
    width: 285px;
    height: 175px;
  }
  .imageHolder .caption {
    position: absolute;
    width: 283px;
    height: 50px;
    top: 0px;
    left: 0px;
    color: black;
    background: lime;
    text-align:center;
    font-weight:bold;
    opacity:0.7;
  }
</style>

You can use the example-1 HTML tag with the above CSS code.

Position text over an image

Caption goes here

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .imageHolder {
      position: relative;
      width: 285px;
      height: 175px;
    }
    .imageHolder .caption {
      position: absolute;
      width: 283px;
      height: 50px;
      top: 40%;
      left: 0px;
      color: #ffffff;
      background: green;
      text-align:center;
      font-weight:bold;
      opacity:0.7;
    }
  </style>
</head>
<body>
  <div class="imageHolder">
  <img src="img/caption4.jpg" alt="" />
  <div class="caption"><br>Caption goes here</div>
  </div>
</body>
</html>

Caption on Right side of the image

Caption goes here

Source Code

.imageHolder {
  position: relative;
  width: 285px;
  height: 175px;
}
.imageHolder .caption {
  position: absolute;
  width: 70px;
  height: 175px;
  top: 0px;
  right: 0px;
  color: #ffffff;
  background: green;
  text-align:center;
  font-weight:bold;
  opacity:0.7;
}

You can use the example-1 HTML tag with the above CSS code.

Caption on Left side of the image

Caption goes here

Source Code

<style type="text/css">
.imageHolder {
  position: relative;
  width: 285px;
  height: 175px;
}
.imageHolder .caption {
  position: absolute;
  width: 70px;
  height: 177px;
  top: 0px;
  left: 0px;
  color: black;
  background: lime;
  text-align:center;
  font-weight:bold;
  opacity:0.7;
}
</style>

You can use the example-1 HTML tag with the above CSS code.

Caption display only on text width

Caption goes here

Source Code

<style type="text/css">
.imageHolder {
  position: relative;
  width: 285px;
  height: 175px;
}
.imageHolder .caption {
  position: absolute;
  height: 50px;
  bottom: 0px;
  left: 0px;
  color: #ffffff;
  background: green;
  text-align:center;
  font-weight:bold;
  opacity:0.7;
}
</style>

You can use the example-1 HTML tag with the above CSS code.

Image caption hover effects

The following code shows how to display caption while mouse hover the image.

Move your mouse over the image

Caption goes here

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .imageHolder {
      position: relative;
      width: 285px;
      height: 175px;
    }
    .imageHolder .caption {
      opacity: 0;
      position: absolute;
      height:50px;
      width: 283px;
      bottom: 0px;
      left: 0px;
      padding: 2px 0px;
      color: black;
      background: lime;
      text-align: center;
      font-weight:bold;
    }
    .imageHolder:hover .caption {
      opacity: 0.7;
    }
  </style>
</head>
<body>
  <div class="imageHolder">
  <img src="img/caption4.jpg" alt="" />
  <div class="caption"><br>Caption goes here</div>
  </div>
</body>
</html>

Full image overlay caption

Move your mouse over the image

Text goes here

Source Code

<style type="text/css">
  .imageHolder {
    position: relative;
    width: 285px;
    height: 175px;
  }
  .imageHolder .caption {
    opacity: 0;
    position: absolute;
    height:175px;
    width: 283px;
    top: 0px;
    left: 0px;
    padding: 2px 0px;
    color: black;
    background: lime;
    text-align: center;
    font-weight:bold;
  }
  .imageHolder:hover .caption {
    opacity: 0.7;
  }
</style>

You can use the above example HTML code with this CSS code

Image caption with Link

The following CSS code display an image caption with a link inside the caption area.

Click here

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .imageHolder {
      position: relative;
      width: 285px;
      height: 175px;
    }
    .imageHolder .caption {
      position: absolute;
      width: 283px;
      height: 50px;
      bottom: 0px;
      left: 0px;
      color: #ffffff;
      background: green;
      text-align:center;
      font-weight:bold;
      opacity:0.7;
    }
  </style>
</head>
<body>
  <div class="imageHolder">
    <img src="img/caption4.jpg" alt="" />
    <a href="http://www.corelangs.com" class="caption"><br>You Link here</a>
  </div>
</body>
</html>