Text overlay options

by ShaCP

HTML

<div class="container">
<div class="title">
TITLE
</div>
<div class="bg">
<img class="image" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-1024-80.jpg"/>
</div>
<div class="text">
Some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</div>
</div>

CSS

.container {
  width: 400px;
  margin: 0 auto;
  position: relative;
  background: lightgray;
}

.title {
  position: absolute;
  font-size: 40px;
}

.bg {
  width: 400px;
  overflow: hidden;
  height: 200px;
}

.image {
  width: 100%;
  height: 100%;
}

.text {
  /* add the below to overlay image */
  /* position: absolute; */
  /* top: 40px; */ /* need to know height of title */
}