Разместить текст на изображении

.works-image { 
  background: url(https://404store.com/2017/09/17/Spa-still-life-with-bamboo-fountain-and-zen-stone.jpg); 
  width: 33vw; 
  height: 33vw; 
  background-size: cover; 
} 
 
.works-image .overlay { 
  width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  opacity: 0; 
  justify-content: center; 
  color: #fff; 
  background-color: rgba(0, 0, 0, 0.4); 
  font-family: "Montserrat", sans-serif; 
  font-size: 3.5333333vw; 
  transition:1s opacity; 
} 
 
.works-image:hover .overlay { 
   
  opacity:1; 
}

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet"> 
<div class="works-image"> 
  <div class="overlay"> 
    <div class="content"> 
      Текст 
    </div> 
  </div> 
</div>

.image { 
  display: block; 
  width: 300px; 
  height: 300px; 
  overflow: hidden; 
  position: relative; 
} 
 
.image img { 
  width: 100%; 
  height: 100%; 
  border: 0; 
  object-fit: cover; 
} 
 
.image .text { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
}

<div class="image"> 
  <img src="https://static.tumblr.com/3d9ac85fda4c928fbf020185e2aab0c5/ecuyhbw/inIon7mm9/tumblr_static_badr4s3xiooc4sosgokwosk0s_640_v2.jpg"> 
  <div class="text">Title</div> 
</div>

.works-image { 
  position: absolute; 
}

<div class="works-image"> 
  <img src="img/works_1.jpg" width="310px" alt=""> 
  <img src="img/works_2.jpg" width="295px" alt=""> 
  <img src="img/works_3.jpg" width="295px" alt=""> 
</div>

.image { 
  position: relative; 
  width: 100%; /* для IE 6 */ 
} 
 
h2 { 
  position: absolute; 
  top: 466px; 
  left: 0; 
  width: 100%; 
} 
 
h2 span { 
  color: #fff; 
  font-size: 30px; 
  line-height: 55px; 
  background: rgba(0, 0, 0, 0.7); 
  background: #000; 
  padding: 10px 10px 10px 16px; 
}

<div class="image"> 
  <img src="image.jpg" alt="" /> 
  <h2><span>текст<br />поверх изображения</span></h2> 
</div>