bootstrap-4bootstrap-5bootstrap-cards

Bootstrap 5 Card and image overlay with positioning control

I am trying to put a card with text overlaying an image. I am not able to put the card inside and over the image. I have tried card-img-overlay and nesting another card inside but to no avail.

What is the best way to move the full card on top of the image (and to the end and mid alignment)? See code and current/desired output.

<section class="container my-5">
    <img src="https://unsplash.com/photos/Fr6zexbmjmc/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MXx8ZHViYWl8ZW58MHx8fHwxNjU0NTAwNTgx&force=true&w=1920" class="card-img">
    <div class="card bg-secondary rounded" style="width: 25rem;">
        <div class="card-body text-light">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</section>

Card overlay

Solution

  • Here you go...

    img {
  object-fit: cover;
}

span {
  background-color: white;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid position-absolute vw-100 h-100 p-0">
    <img class="position-absolute w-100 h-100" src="https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg" alt="" />
    <div id="text" class="position-relative h-100 d-flex align-items-center justify-content-end">
      <span class="p-2">Some random text</span>
    </div>
  </div>
</body>

</html>