reference/overlay_image.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>overlay - image</title>

<style>
    #thumbnail{
        display: block;
        width: 100%; 
    }
    #thumbnailTitle{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


.module {
  margin: 10px;
  width: 230px;
  height: 150px;
  float: left;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg);
  background-size: cover;
  position: relative;
}

h2 {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 8px;
  color: white;
  margin: 0;
  font: 14px Sans-Serif;
}


</style>

</head>
<body>

<!-- <div>
    <img id="thumbnail" src="../assets/img/thumbnails/splash.jpg"> 
    <div id="thumbnailTitle">Hello</div> 
</div>
 -->

<div class="module">
  <h2>Title here</h2>
</div>

</body>
</html>