I am trying to design a bootstrap card that features the title in a semi-transparent box positioned over the image, while keeping the rest of the card in line with the standard bootstrap design. The code I have written so far is as follows:
<style>
.box{
position: relative;
}
.box .text{
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
align-items: center;
justify-content: center;
top: 40%;
background: rgba(178, 0, 0, 0.8);
font-family: Arial, sans-serif;
color: #fff;
width: 100%;
height: 10%;
}
</style>
<div class="container">
<div class="card img-fluid" style="width:500px">
<img class="card-img-top" src="img/green.jpg" alt="Card image" style="width:100%">
<div class="card-img-overlay box">
<h4 class="card-title text">Title</h4>
</div>
<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<a href="#" class="btn btn-danger">Learn more</a>
</div>
</div>
Here is what it looks like currently: https://i.sstatic.net/auId8.jpg
The issue I am facing with my code is that the red box containing the card title does not adjust responsively. It covers not just the image, but the entire card. How can I modify it so that the red box appears at the bottom of the image? I have tried adjusting the css "top" and adding "bottom", but since the text extends beyond the image, it does not work properly.
I want the final outcome to resemble this design: https://i.sstatic.net/blIga.jpg
The red box holding the card title should always remain at the bottom of the image, regardless of screen size.
UPDATE
This is how it appears after implementing the additional code below.