Struggling to create an image catalog with cards containing text while using position absolute on the text and position relative on the card. Unfortunately, it's not working as expected.
/*catalog style*/
.grid-container{
padding: clamp(5px,10vw,20px) clamp(5px,15vw,30px);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-auto-rows: auto;
column-gap: 40px;
row-gap: 40px;
}
.card {
position:relative;
background-color: #EADDA6;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 20px;
}
.card:hover {
box-shadow: 0 16px 32px 0 rgba(0,0,0,0.2);
opacity: 0.8;
transition-duration: 0.3s;
}
.card img {
position:relative;
border-radius: 20px ;
object-fit: cover;
}
.card-container {
position:absolute;
display: flex;
flex-direction: column;
align-items: center;
padding: 2px 16px;
}
<section class="grid-container">
<div class="card" th:each="animal : ${animals}">
<a href="animal.html">
<img src="../static/public/animals/gwen-weustink-I3C1sSXj1i8-unsplash.jpg" alt="Avatar" style="width:100%">
<div class="card-container">
<h4 th:text="${animal.getName()}"><b>Tiger</b></h4>
<p th:text="${animal.getSpecies()}">Mario</p>
</div>
</a>
</div>
</section>
Attempted to use position relative on parent elements, however, the text remains below the card instead of inside it as intended. Display grid seems to work correctly without the positioning issues.