I'm facing some styling issues. My goal is to ensure that each h3 tag has the same distance between the bottom border of its container (marked with a pink border) and the bottom border of its parent (indicated in the image below): https://i.sstatic.net/9b2g8.jpg
Both elements have identical CSS, with the only difference being the amount of text.
Here's the HTML code snippet:
<div class="col-6">
<a href='{{link}}' style='background-image: url("{{image}}")' class="histories__image">
<div class="histories__text">
<h3>{{title}}</h3>
</div>
<div class="histories__underline"></div>
</a>
</div>
And this is the associated CSS code:
.histories {
margin-bottom: 100px;
&__image {
height: 41vh;
margin-top: 33px;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
transition: filter 1s;
&:hover{
filter: brightness(80%);
}
&:hover .histories__text{
bottom: 15px;
}
&:hover .histories__underline{
opacity: 1;
left: 0;
width: 70%;
}
}
&__text {
text-align: center;
display: block;
position: absolute;
width: 100%;
bottom: 0px;
left: 50%;
transform: translate(-50%, -50%);
transition: bottom .3s;
color: white;
border: 1px solid pink;
}
&__underline {
position: absolute;
display: block;
bottom: 10%;
width: 0%;
left: 50%;
margin-left: 15%;
background-color: white;
height: 1px;
opacity: 0;
transition: width .3s, left .3s;
}
}