Bootstrap 3 缩略图在悬停时显示内容，但它也覆盖了父 div答案

【问题标题】：Bootstrap 3 thumbnail shows content on hover, but it covers the parent div alsoBootstrap 3 缩略图在悬停时显示内容，但它也覆盖了父 div
【发布时间】：2019-02-21 10:04:18
【问题描述】：

我用缩略图类创建了一些<divs>。我希望仅在鼠标悬停在图像上时显示标题。到目前为止我已经这样做了，但是它最终覆盖了整个 div。

我怎样才能只让标题滑入图像上？

$('.thumbnail').hover(function() {
  $(this).find('.caption').slideDown(1000); //.fadeIn(250)
}, function() {
  $(this).find('.caption').slideUp(300); //.fadeOut(205)
});

.thumbnail .caption.caption-slide {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.58);
  color: #FFFFFF;
  text-align: center;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<section>
  <div class="row">
    <!--Bear-->
    <div class="col-lg-3 col-md-4 col-sm-6">
      <h3>Bear</h3>
      <div class="thumbnail">
        <div class="caption caption-slide">
          <p>BEAR BEAR BEAR SALMON</p>
        </div>
        <img src="http://www.placebear.com/700/500" alt="Government">
      </div>
    </div>
    <!--bEAR-->
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="thumbnail">
        <div class="caption caption-slide">
          <p>FDSFASDFADFADFA.</p>
        </div>
        <img src="http://www.placebear.com/700/500" alt="Government">
        <h3>bEAR2</h3>
      </div>
    </div>
  </div>
</section>

这是我的example。编辑：（示例已更新。将第二张图片保留为原始图片以显示问题所在）

【问题讨论】：

您可以使用 .thumbnail .caption.caption-slide 的 top、left、width 和 height 属性

标签： jquery html

【解决方案1】：

只需将图像和标题添加到 div('img-wrapper') 中，并将 position: relative; 给包装器 div('img-wrapper')

$('.thumbnail').hover(function() {
  $(this).find('.caption').slideDown(1000); //.fadeIn(250)
}, function() {
  $(this).find('.caption').slideUp(300); //.fadeOut(205)
});

.thumbnail .caption.caption-slide {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.58);
  color: #FFFFFF;
  text-align: center;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: none;
}
.img-wrapper {
  position: relative;
}

.img-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<section>
  <div class="row">
    <!--Bear-->
    <div class="col-lg-3 col-md-4 col-sm-6">
      <h3>Bear</h3>
      <div class="thumbnail">
        <div class="img-wrapper">
          <div class="caption caption-slide">
            <p>BEAR BEAR BEAR SALMON</p>
          </div>
          <img src="http://www.placebear.com/700/500" alt="Government">
         </div>
      </div>
    </div>
    <!--bEAR-->
    <div class="col-lg-3 col-md-4 col-sm-6">
      <div class="thumbnail">
        <div class="img-wrapper">
          <div class="caption caption-slide">
            <p>FDSFASDFADFADFA.</p>
          </div>
          <img src="http://www.placebear.com/700/500" alt="Government">
        </div>
        <h3>bEAR2</h3>
      </div>
    </div>
  </div>
</section>

【讨论】：