-1

I want to create a bootstrap card where the title is in a semi transparent box over the image, while the rest of the card looks like regular bootstrap card. This is my code so far:

<style>
.box{
    position: relative;
    /*display: inline-block; /* Make the width of box same as image */
}
.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%; /* Adjust this value to move the positioned div up and down */
    background: rgba(178, 0, 0, 0.8);
    font-family: Arial,sans-serif;
    color: #fff;
    width: 100%; /* Set the width of the positioned div */
    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 how it looks: enter image description here

My issue with my code is that this red box containing the card title isn't responsive. It spans not just over the image, but over the entire card. How do I change it so that the red box is at the bottom of the image? I've already tried to change the css "top" and added a "bottom", but since the text is not over the image but over the whole card, it doesn't work.

I want the result to look like this: enter image description here

The red box containing the card title should always stay on the bottom of the image, no matter the screen size.

UPDATE

This is how it looks like after including the code below.

enter image description here

Cyhiraeth
  • 15
  • 1
  • 6

1 Answers1

1

Move the .card-img-overlay element around the image and the title like this

<div class="card-img-overlay box">
    <img class="card-img-top" src="img/green.jpg" alt="Card image" style="width:100%">
    <h4 class="card-title text">Title</h4>
</div>

And then give the title the following css

.box {
    position: relative;
}
.box .text {
    position: absolute;
    z-index: 999;     
    text-align: center;
    bottom: 0;
    left: 0;
    background: rgba(178, 0, 0, 0.8);
    font-family: Arial,sans-serif;
    color: #fff;
    width: 100%; /* Set the width of the positioned div */
    height: 10%;
}

I'm pretty sure this will give the desired result

Nico Shultz
  • 1,872
  • 1
  • 9
  • 23
  • Hey, thanks a lot for this, the red box is now responsive and sticks to its place. I only have one issue left, the red box is overflowing the card. I tried `overflow: hidden;` but it isn't enough. Any idea why this is happening? I edited my question to include the picture of what I mean. – Cyhiraeth Jul 14 '20 at 06:38
  • _Edit_ I found a work around, i changed the position to `position: relative;` and changed the `bottom` property to 28px. and it seemed to fix my problem. I probably isn't the best solution, but it works :D – Cyhiraeth Jul 14 '20 at 07:03
  • Ah i see i forgot the left: 0; I would keep it absolute and give it left: 0; otherwise it is still gonna use the space underneath the title and you might have problems positioning elements underneath – Nico Shultz Jul 14 '20 at 07:15
  • No problem! glad i could help! could you accept my answer? :) – Nico Shultz Jul 14 '20 at 07:24