I've been attempting to modify the justify-content in the CSS class to "flex-end" and "end," however the text is not relocating to the bottom.
My suggestion is that we concentrate on the img-overlay class, as that's where we adjust the position of the text on the card.
.overlay.overlay-sm .shape {
filter: brightness(0) invert(1);
opacity: 0.15;
height: 40px;
}
.overlay.overlay-sm .shape.wave {
height: initial;
width: 70px;
}
.overlay.overlay-sm .shape.xshape {
height: 30px;
}
.portfolio .square {
top: 28%;
left: 20%;
}
.portfolio .circle {
top: 8%;
right: 35%;
}
.portfolio .triangle {
top: 10%;
right: 4%;
}
.portfolio .half-circle1 {
bottom: 13%;
left: 5%;
}
.portfolio .half-circle2 {
bottom: 35%;
left: 20%;
}
.portfolio .xshape {
bottom: 10%;
left: 8%;
}
.portfolio .wave {
bottom: 38%;
left: 6%;
}
.grid {
width: 100%;
margin: 1.5rem 0;
}
.grid-item {
width: 33.33%;
padding: 1rem 1.2rem;
display: flex;
justify-content: center;
}
.......[truncated for brevity]......
.more-folio {
display: flex;
justify-content: center;
}<div class="grid-item logo-design">
<div class="gallery-image">
<img src="./img/portfolio/port1.jpg" alt="">
<div class="img-overlay">
<div class="plus">
<div class="img-description">
<h3>Logo Design</h3>
<h5>View Demo</h5>
</div>
</div>
</div>
</div>
</div>