I'm having trouble adding an rgba background to multiple images using Bootstrap while ensuring responsiveness. Unfortunately, something seems to have gone wrong.
Here's an example of what I'm trying to achieve:
https://i.sstatic.net/ueBEZ.png
Below is the HTML code snippet I'm working with:
.text-caption {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.caption:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
}<div class="container">
<div class="row">
<div class="text-center">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/400x300/ffb3d1/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/400x300/c2f0c2/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="caption">
<img class="img-responsive" src="https://dummyimage.com/400x300/cc99ff/000">
<div class="text-caption">
<h3>This is some text</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn btn-primary center-block">Button</button>
</div>
</div>
</div>
</div>
</div>Any help would be greatly appreciated!