Text does not appear when hovering over image - html

Question

When you hover over the image, the place where it should go down from top to bottom does not work and the image does not grow when I hover over it.
Here I want the place labeled "downmen" to go down with a top-down effect. At the same time I want the picture I hover over to grow a little.
As a result, when both hover over the image, I want one to go down from the top and the other to make the image grow.
Note I used bootstrap 5 while doing these.
.section-two-card-inner-two {
position: relative;
}
.section-two-card-inner-two .downmen {
display: none;
position: absolute;
z-index: 1;
width: 100%;
height: 110px;
padding: 2% 10%;
}
.section-two-card-inner-two:hover .downmen {
display: block;
}
.section-two-card-inner-two .downmen img {
height: 55px;
}
.card-title-head {
padding-top: 100px;
}
.section-two-card-inner-two a {
padding-top: 15%;
}
.section-two-card .card-title {
font-weight: 600;
font-family: 'Manrope', sans-serif;
font-size: 1.3rem;
line-height: 26px;
}
.section-two-card .card-text {
font-weight: 700;
font-family: 'League Spartan', sans-serif;
font-size: 26px;
line-height: 30px;
}
.section-two-card .card-text:hover {
color: #ccc;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap-grid.min.css" />
<div class="row row-cols-1 row-cols-lg-2 section-two-card m-0">
<div class="col p-2 section-two-card-inner ">
<div class="card bg-dark text-white section-two-card-inner-two ">
<div class="downmen d-flex text-secondary align-items-center ">
<img src="https://picsum.photos/seed/picsum/55" alt=".." class="img-fluid rounded-circle me-3">
<div class="col-10">
<h4 class="fw-normal">Posted by <strong>admin</strong></h4>
<h4 class="fw-normal">August 27, 2025</h4>
</div>
</div>
<img src="https://picsum.photos/500" alt="" class="rounded-4 border-0 img-fluid">
<div class="card-img-overlay p-4 p-sm-5 border border-0 ">
<div class="d-flex card-title-head">
<h5 class="card-title text-secondary">Most Read </h5>
<h4 class="card-title ms-3"><i class="bi bi-clock fs-5 text-white me-2"></i> 6 min read</h4>
</div>
<p class="card-text">This will help you become the first and strengthen your position</p>
Read More <i class="bi bi-arrow-right ms-2 fs-4"></i>
</div>
</div>
</div>
</div>

Answer 1

Your example provides everything you need. Just use your browser to inspect the initial state of the relevant elements (.card_post) and that after forcing hover on .item-wrapper.
The only lingering issue is that the hover state is triggered on an element which is larger than the image. That could be refined with layout adjustments.
.section-two-card-inner-two {
position: relative;
overflow: hidden; /* new */
}
.section-two-card-inner-two img {
transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s; /* new */
}
.section-two-card-inner-two:hover img {
transform: scale(1.1); /* new */
}
.section-two-card-inner-two .downmen {
opacity: 0; /* new */
transform: translateY(-10px); /* new */
transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s; /* new */
position: absolute;
z-index: 1;
width: 100%;
height: 110px;
padding: 2% 10%;
}
.section-two-card-inner-two:hover .downmen {
opacity: 1; /* new */
transform: translateY(0); /* new */
}
.section-two-card-inner-two .downmen img {
height: 55px;
}
.card-title-head {
padding-top: 100px;
}
.section-two-card-inner-two a {
padding-top: 15%;
}
.section-two-card .card-title {
font-weight: 600;
font-family: 'Manrope', sans-serif;
font-size: 1.3rem;
line-height: 26px;
}
.section-two-card .card-text {
font-weight: 700;
font-family: 'League Spartan', sans-serif;
font-size: 26px;
line-height: 30px;
}
.section-two-card .card-text:hover {
color: #ccc;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap-grid.min.css" />
<div class="row row-cols-1 row-cols-lg-2 section-two-card m-0">
<div class="col p-2 section-two-card-inner ">
<div class="card bg-dark text-white section-two-card-inner-two ">
<div class="downmen d-flex text-secondary align-items-center ">
<img src="https://picsum.photos/seed/picsum/55" alt=".." class="img-fluid rounded-circle me-3">
<div class="col-10">
<h4 class="fw-normal">Posted by <strong>admin</strong></h4>
<h4 class="fw-normal">August 27, 2025</h4>
</div>
</div>
<img src="https://picsum.photos/500" alt="" class="rounded-4 border-0 img-fluid">
<div class="card-img-overlay p-4 p-sm-5 border border-0 ">
<div class="d-flex card-title-head">
<h5 class="card-title text-secondary">Most Read </h5>
<h4 class="card-title ms-3"><i class="bi bi-clock fs-5 text-white me-2"></i> 6 min read</h4>
</div>
<p class="card-text">This will help you become the first and strengthen your position</p>
Read More <i class="bi bi-arrow-right ms-2 fs-4"></i>
</div>
</div>
</div>
</div>