Image with Transparent Caption

Here’s some HTML and CSS to make an image with a transparent caption that displays over the image.

<style type="text/css">
  .caption-background {
      width: 500px;
      background-color: black;
      opacity: 0.7;
      margin-top: -80px;
      color: white;
   }
   .caption {
      vertical-align: bottom;
      font-family: Helvetica,Arial;
      margin: 0px 10px 0px 10px;
   }
   .caption H1 {
      margin: 0px;
      font-weight: normal;
   }
   .caption P {
      margin: 0px 0px 15px 0px;
      padding: 0px 0px 5px 0px;
   }
</style>
<img src="evergreen-soshiki.jpg" width="500" height="257" />
<div class="caption-background">
  <div class="caption">
    <h1>Caption caption caption caption
    <p>By Author Name | Date | N Comments
  </div>
</div>