在 bootstrap5 网格上覆盖水平文本

Question

在我的网站上工作，认为自己是 Boostrap5 并且对目前的结果非常满意，但我希望 名称在悬停在左下角的图像上时垂直显示 ，但我不确定我的代码哪里出错了。文本位置很低，一直到网格列的边缘。

我确定我在 position: 属性或其他方面出错了。

.theteam img {
  cursor: pointer;
}

.theteam img:hover {
  opacity: 0.8;
}

.project {
  position: relative;
  overflow: hidden;
}

.project .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  transition: all 0.4s ease;
  opacity: 0;
}

.project img {
  transition: all 0.4s ease;
}

.project:hover .overlay {
  opacity: 1;
}

.project:hover img {
  transform: scale(1.1);
}

.text-vertical {
  transform-origin: 0 0;
  transform: rotate(90deg);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section id="about" class="about bg-dark p-5">
  <div class="container text-center mt-5">
    <h4 class="text-light text-capitalize mb-0">The rocking team</h4>
    <img src="https://poyo-pat-333.netlify.app/images/underline.png" alt="______"></span>
  </div>

  <div class="container theteam mt-5">
    <div class="row g-4 text-center">
      <div class="col-md-3 col-sm-6 project inline-block overlay">
        <img src="https://poyo-pat-333.netlify.app/images/poyo_moya.jpg" alt="team">
        <div class="text-center">
          <h6 class="text-white text-vertical position-absolute">Poyo Moya</h6>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/regi-villardell.jpg" alt="team">
        <div>
          <div>
            <h6 class="text-white text-vertical">Regi Vilardell</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/oriol_fontanals.jpg" alt="team">
        <div>
          <div>
            <h6 class="text-white text-vertical">Oriol Fontanals</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/Patrick_obrien.jpg" alt="team">
        <div class="">
          <div>
            <h6 class="text-white text-vertical">Patrick O'Brien</h6>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>

谢谢。

Answer 1

我已经更新了你的。text-vertical，你看看：

UPD：我已经 .text-top class 将文本与图像顶部对齐。

.theteam img {
  cursor: pointer;
}

.theteam img:hover {
  opacity: 0.8;
}

.project {
  position: relative;
  overflow: hidden;
}

.project .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  transition: all 0.4s ease;
  opacity: 0;
}

.project img {
  transition: all 0.4s ease;
}

.project:hover .overlay {
  opacity: 1;
}

.project:hover img {
  transform: scale(1.1);
}

.text-vertical {
  transform-origin: 0 0;
  transform: rotate(270deg);
  /* here */
  width: fit-content;
  /* this line is important */
}

/* top align for vertical text */
.text-vertical.text-top {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg) translate3D(-100%, 0, 0);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section id="about" class="about bg-dark p-5">
  <div class="container text-center mt-5">
    <h4 class="text-light text-capitalize mb-0">The rocking team</h4>
    <img src="https://poyo-pat-333.netlify.app/images/underline.png" alt="______">
  </div>

  <div class="container theteam mt-5">
    <div class="row g-4 text-center">
      <div class="col-md-3 col-sm-6 project inline-block overlay">
        <img src="https://poyo-pat-333.netlify.app/images/poyo_moya.jpg" alt="team">
        <div class="text-center">
          <h6 class="text-white text-vertical position-absolute">Poyo Moya</h6>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/regi-villardell.jpg" alt="team">
        <div>
          <div>
            <h6 class="text-white text-vertical">Regi Vilardell</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/oriol_fontanals.jpg" alt="team">
        <div>
          <div>
            <h6 class="text-white text-vertical">Oriol Fontanals</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/Patrick_obrien.jpg" alt="team">
        <div class="">
          <div>
            <h6 class="text-white text-vertical">Patrick O'Brien</h6>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="container theteam mt-5">
    <div class="row g-4 text-center">
      <div class="col-md-3 col-sm-6 project inline-block overlay">
        <img src="https://poyo-pat-333.netlify.app/images/poyo_moya.jpg" alt="team">
        <div class="text-center">
          <h6 class="text-white text-vertical text-top">Poyo Moya</h6>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/regi-villardell.jpg" alt="team">
        <div>
          <div>
            <h6 class="text-white text-vertical text-top">Regi Vilardell</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/oriol_fontanals.jpg" alt="team">
        <div>
          <div>
            <h6 class="text-white text-vertical text-top">Oriol Fontanals</h6>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 project">
        <img src="https://poyo-pat-333.netlify.app/images/Patrick_obrien.jpg" alt="team">
        <div class="">
          <div>
            <h6 class="text-white text-vertical text-top">Patrick O'Brien</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

在 bootstrap5 网格上覆盖水平文本

Overlay horizontal text over bootstrap5 grid

css

css-grid

bootstrap-5