Working on my website, thought myself Boostrap5 and super happy about the outcome so far, but I want that the name appears vertically on hover over the images on the bottom left, but I am not sure where I am going wrong in my code. The text is placed very low and to the edge of the grid column.
I'm sure I'm going wrong with the position: attribute or something.
.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/[email protected]/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>Thanks.
I've made updates to your .text-vertical, take a look:
UPD: I've made .text-top class to align text to top of the image.
.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/[email protected]/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>