linear-gradient for Bootstrap thumbnail-CodePudding

I try to make a 3-column grid with images so that some text overlays these images. I found an example of the linear gradient for this purpose:

.card__content {
    position: absolute;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

So in HTML I have the next:

<body>
<div >
    <div >
        <div >
            <div  style="position:relative;">
                <img src="1.jpg" align="left" >
                <div >
                    <h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
                </div>   
            </div>
        </div>
        <div >
            <div  style="position:relative;">
                <img src="2.jpg" align="left" >
                <div >
                    <h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
                </div>
            </div>
        </div>
        <div >
            <div  style="position:relative;">
                <img src="3.jpg" align="left" >
                <div >
                    <h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
                </div>
            </div>
        </div>
    </div>
</div>

But this gradient doesn't glue to the end of the image and climbs out to the right. And the thumbnail's border doesn't stretch for all length of the block, though without the gradient it did. Here is what it looks like now. Image

Please help!

CodePudding user response：

I have made a few changes:

.card__content {
  position: absolute;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  color: #fff;
}

.thumbnail {
  display: inline-block;
  border: 0;
}

.thumbnail img {
  width: 100%;
  max-width: 100%
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div  style="position:relative;">
        <img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" >
        <div >
          <h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
        </div>
      </div>
    </div>
    <div >
      <div  style="position:relative;">
        <img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" >
        <div >
          <h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
        </div>
      </div>
    </div>
    <div >
      <div  style="position:relative;">
        <img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" >
        <div >
          <h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
        </div>
      </div>
    </div>
  </div>
</div>