A CodePen by Matthew Taylor.

index.html

<div class="outerwrap">
  <div class="boxcontent">
    <div class="overlay clearfix">
      overlay text
    </div>
  </div>
</div>
<div class="outerwrap">
  <div class="boxcontent">
    <div class="overlay clearfix">
      overlay text here and a bunch more so it wraps
    </div>
  </div>
</div>

style.css

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.outerwrap{
  display:block;
  position:relative;
  float:left;
  outline: 1px solid green;
}
.boxcontent {
  display:block;
  position:relative;
  outline: 1px solid black;
  width: 200px;
  height:200px;
}
.overlay {
  position:absolute;
  width:80%;
  bottom:20px;
  margin:0 10%;
  background-color:rgba(0, 0, 0, 0.1);
  border-radius:5px;
  text-align:center;
}