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

Question

当你 hover 在图像上时，它应该 go 从上到下向下的地方不起作用，当我 hover 在它上面时图像不会增长。

在这里，我希望将标记为“downmen”的位置向下移动到 go，并具有自上而下的效果。 同时我想让我hover上面的图片长一点。 结果，当两个 hover 在图像上时，我想要一个从顶部向下 go ，另一个使图像增长。 请注意，我在执行这些操作时使用了 bootstrap 5。

 .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

您的示例提供了您需要的一切。 只需使用您的浏览器检查相关元素 ( .card_post ) 的初始 state 以及在.item-wrapper上强制使用 hover 之后的那个。

唯一挥之不去的问题是 hover state 是在比图像大的元素上触发的。 这可以通过布局调整来改进。

 .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>