SoftHubSolution

 How to add text on  image: 

1. You need to create a parent with relative position.
2. Then Add your image and text.
3. Give the text layer the basic style and add position absolute and top,left,right,bottom value relative to where you need the text to appear.
4. Give width 100% for the text layer to cover full width as your relative parent.

Code

<!-- HTML -->
<div class="relative">
  <img src="image-path" alt="">
  <p class="absolute-text">Hey I am text on an Image.</a> </p>
</div>
/* CSS */
.relative{position:relative; width:600px;}
.absolute-text{position:absolute; bottom:0; font-size:24px; font-family:"vedana"; background:rgba(251,251,251,0.5);
padding:10px 20px; width:100%; text-align:center;}
.absolute-text a{font-size:16px; color:#b92b27;}