Bootstrap 5图片悬停效果异常：downmen下拉与图片放大失效

问题说明 #

当前代码存在以下问题：

• 鼠标悬停图片时，downmen模块仅生硬显示，无从上到下的下拉动画
• 未实现图片悬停时的放大效果

修改方案 #

通过CSS过渡动画替代display属性切换，同时添加图片缩放效果，具体代码调整如下：

修改后的CSS代码

.section-two-card-inner-two {
  position: relative;
  overflow: hidden; /* 确保图片放大时不超出容器 */
}

.section-two-card-inner-two .downmen {
  position: absolute;
  z-index: 2; /* 确保下拉模块在最上层 */
  width: 100%;
  height: 110px;
  padding: 2% 10%;
  top: -100%; /* 初始位置在容器上方 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease; /* 添加过渡动画 */
}

.section-two-card-inner-two:hover .downmen {
  top: 0; /* 悬停时移动到容器顶部 */
  opacity: 1;
  visibility: visible;
}

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

/* 添加图片放大效果 */
.section-two-card-inner-two img {
  transition: transform 0.3s ease;
}

.section-two-card-inner-two:hover img {
  transform: scale(1.05); /* 悬停时图片放大1.05倍 */
}

HTML代码（无需修改，保持原结构即可）

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

关键改动说明 #

1. 下拉动画实现：

   • 移除display: none，改用top、opacity和visibility控制下拉模块的显示/隐藏，配合transition实现平滑的从上到下滑动效果
   • 提高z-index确保下拉模块不会被图片或其他元素覆盖

2. 图片放大效果：

   • 给图片添加transition过渡属性，悬停时通过transform: scale(1.05)实现轻微放大
   • 在容器.section-two-card-inner-two添加overflow: hidden，避免图片放大后超出容器范围

内容的提问来源于stack exchange，提问作者Fatih