缩略图悬停对标题作为兄弟姐妹的效果

Question

基本上，我希望缩略图 HOVER 工作为：caption应显示和/或躲藏在悬停。

请检查以下片段是否有问题：

$(document).ready(function() {
  $('.caption').css('display', 'none');
  $('.thumbnail').hover(function() {
    $(this).siblings('.caption').slideDown(250);
  }, function() {
    $(this).siblings('.caption').slideUp(250);
  });
});

body {
  padding-top: 50px;
}
.thumbnail {
  position: relative;
  overflow: hidden;
}
.caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(66, 139, 202, 0.75);
  width: 100%;
  height: 100%;
  padding: 2%;
  display: none;
  text-align: center;
  color: #fff !important;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="http://lorempixel.com/400/300/sports/1/" alt="...">
        <!-- I know I need to place the Caption div section over here, but in my situation I want it down -->
      </div>
      <!--  this part isn't working on hover - I want this working -->
      <div class="caption">
        <h4>Thumbnail Headline</h4>
        <p>short thumbnail description</p>
        <p><a href="" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
          <a href="" class="label label-default" rel="tooltip" title="Download now">Download</a></p>
      </div>
    </div>
  </div>
</div>
<!-- /.container -->

Answer 1

新的更正版本：

$(document).ready(function() {
$('.caption').css('display', 'none');
$('.hover').hover(function() {
    $(this).find('.caption').slideDown(250);
}, function() {
    $(this).find('.caption').slideUp(250);
});
});

https://jsfiddle.net/seniorfront/qseg36x6/7/