將鼠標懸停在圖像上時不顯示文本

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>