Currently working my way through Boostrap5 while developing my website and I am extremely pleased with the progress so far. However, I have hit a snag - I want the name to appear vertically when hovering over the images on the bottom left, but for some reason the text is positioned very low and close to the edge of the grid column.
I suspect that the issue lies in the position: attribute or something along those lines.
.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7a9b7ab">[email protected]</a>/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 awesome 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>Appreciate any help with this dilemma!