Text won't go in image on Bootstrap-CodePudding

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 >
  <!-- "Applications" square -->
  <div >
    <div >
      <a href="./candidatures.php">
        <img src="https://via.placeholder.com/1920x1080.png"  alt="meeting">
        <div >
          <h4 >Your applications</h4>
          <p >Keep track your applications here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Offers" square -->
  <div >
    <div >
      <a href="./offers.php">
        <img src="https://via.placeholder.com/1920x1080.png"  alt="shake">
        <div >
          <h4 >Current offers</h4>
          <p >Check out the popular offers right now.</p>
        </div>
      </a>
    </div>
  </div>
</div>
<div >
  <div >
    <!-- "Companies" square -->
    <div >
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png"  alt="corporations">
        <div >
          <h4 >Companies</h4>
          <p >Browse the companies here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Personnal informations" square -->
  <div >
    <div >
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png"  alt="paper">
        <div >
          <h4 >Personnal informations</h4>
          <p >Modify your personnal informations here.</p>
        </div>
      </a>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <!-- "Applications" square -->
  <div >
    <div >
      <a href="./candidatures.php">
        <img src="https://via.placeholder.com/1920x1080.png"  alt="meeting">
        <div >
          <h4 >Your applications</h4>
          <p >Keep track your applications here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Offers" square -->
  <div >
    <div >
      <a href="./offers.php">
        <img src="https://via.placeholder.com/1920x1080.png"  alt="shake">
        <div >
          <h4 >Current offers</h4>
          <p >Check out the popular offers right now.</p>
        </div>
      </a>
    </div>
  </div>
</div>
<div >
  <div >
    <!-- "Companies" square -->
    <div >
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png"  alt="corporations">
        <div >
          <h4 >Companies</h4>
          <p >Browse the companies here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Personnal informations" square -->
  <div >
    <div >
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png"  alt="paper">
        <div >
          <h4 >Personnal informations</h4>
          <p >Modify your personnal informations here.</p>
        </div>
      </a>
    </div>
  </div>
</div>