将鼠标悬停在图像上时不显示文本

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> <a href="#" class="card-title text-decoration-none text-white d-flex">Read More <i class="bi bi-arrow-right ms-2 fs-4"></i></a> </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> <a href="#" class="card-title text-decoration-none text-white d-flex">Read More <i class="bi bi-arrow-right ms-2 fs-4"></i></a> </div> </div> </div> </div>