Bootstrap Overlay Text on Image [duplicate] - html

Question

This question already has answers here:
Bootstrap 3 CSS image caption overlay
(5 answers)
Closed 7 years ago.
I am trying to display overlay text on the Image using Bootstrap. I refereed the Stack Overflow Question and Answer. But Overlay is not fit into Image. I don't know What I have missed in that Answer
What I have tried Fiddle Here
Thank You
HTML
<div class="container">
<div id="DivOurProducts" class="row">
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
<a href="/Article/Overview/1">
<div class="fixOverlayDiv">
<img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
<div class="OverlayText">Text Here</div>
</div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
<a href="/Article/Overview/2">
<div class="fixOverlayDiv">
<img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
<div class="OverlayText">Text Here</div>
</div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
<a href="/Article/Overview/3">
<div class="fixOverlayDiv">
<img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
<div class="OverlayText">Text Here</div>
</div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
<a href="/Article/Overview/4">
<div class="fixOverlayDiv">
<img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
<div class="OverlayText">Text Here</div>
</div>
</a>
</div>
</div>
</div>
CSS
.fixOverlayDiv{
width:100%;
padding:0px;
}
.OverlayText{
background-color: #000;
bottom: 0;
color: #fff;
left: 0;
opacity: 0.5;
position: absolute;
width: 100%;
}

Answer 1

I found an Answer. I have missed Position = "relative" for Parent Div
CSS
In fixOverlayDiv class added Position = "relative"
.fixOverlayDiv{
position: relative;
width:100%;
padding:0px;
}
Updated Fiddle Here

Answer 2

Do you want to change the css class to .OverlayText{
background-color: #000;
bottom: 20%;
color: #fff;
left: 25%;
opacity: 0.5;
position: absolute;
width: 50%;
}