'Text won't go in image on Bootstrap

I have a problem, my text won't go on image. It has a very weird behavior because I have a little hover system and the text only behaves correctly when hover triggers. I use Boostrap-5 and here is the part of my code concerned:

/* Style of the container containing the images and the text */

* {
  margin: 0;
  padding: 0;
}


/* Style of the text inside the images" */

.text-block {
  position: absolute;
  top: 5%;
  left: 5%;
  color: black;
}


/* Style for all 4 images */

.img {
  width: 100%;
  border-radius: 30px;
  filter: drop-shadow(0 0 0.5rem grey) opacity(60%);
}

.zoom {
  margin: 10px;
  transition: transform .5s;
}

.zoom:hover {
  transform: scale(1.1);
  z-index: 1;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row g-0">
  <!-- "Applications" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./candidatures.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="meeting">
        <div class="text-block">
          <h4 class="big">Your applications</h4>
          <p class="medium">Keep track your applications here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Offers" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./offers.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="shake">
        <div class="text-block">
          <h4 class="big">Current offers</h4>
          <p class="medium">Check out the popular offers right now.</p>
        </div>
      </a>
    </div>
  </div>
</div>
<div class="row g-0">
  <div class="col-lg-6 col-sm-12">
    <!-- "Companies" square -->
    <div class="zoom">
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="corporations">
        <div class="text-block">
          <h4 class="big">Companies</h4>
          <p class="medium">Browse the companies here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Personnal informations" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="paper">
        <div class="text-block">
          <h4 class="big">Personnal informations</h4>
          <p class="medium">Modify your personnal informations here.</p>
        </div>
      </a>
    </div>
  </div>
</div>
htmlcssbootstrap-5


Solution 1:[1]

The issue is, that position: absolute will align the element to the next relative parent. In your case this is the body as you never declared another element as relative element.

Just add position: relative to the direct parent of the .text-block class with:

.zoom a { position: relative; }

.zoom a {
  position: relative;
}


/* --- --- Original CSS --- --- */

/* Style of the container containing the images and the text */

* {
  margin: 0;
  padding: 0;
}


/* Style of the text inside the images" */

.text-block {
  position: absolute;
  top: 5%;
  left: 5%;
  color: black;
}


/* Style for all 4 images */

.img {
  width: 100%;
  border-radius: 30px;
  filter: drop-shadow(0 0 0.5rem grey) opacity(60%);
}

.zoom {
  margin: 10px;
  transition: transform .5s;
}

.zoom:hover {
  transform: scale(1.1);
  z-index: 1;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row g-0">
  <!-- "Applications" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./candidatures.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="meeting">
        <div class="text-block">
          <h4 class="big">Your applications</h4>
          <p class="medium">Keep track your applications here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Offers" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./offers.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="shake">
        <div class="text-block">
          <h4 class="big">Current offers</h4>
          <p class="medium">Check out the popular offers right now.</p>
        </div>
      </a>
    </div>
  </div>
</div>
<div class="row g-0">
  <div class="col-lg-6 col-sm-12">
    <!-- "Companies" square -->
    <div class="zoom">
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="corporations">
        <div class="text-block">
          <h4 class="big">Companies</h4>
          <p class="medium">Browse the companies here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Personnal informations" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="paper">
        <div class="text-block">
          <h4 class="big">Personnal informations</h4>
          <p class="medium">Modify your personnal informations here.</p>
        </div>
      </a>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tacoshy

Related Questions