缩略图标题在引导程序中的悬停效果

Question

我希望在缩略图中有字幕悬停效果，为此我编码像这样

＆＃13;

＆＃13;

$(document).ready (function() {

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

＆＃13;

.thumbnail {
position:relative;
overflow:hidden;
}

.caption {
position:absolute;
top:0;
right:0;
background:RGB( 5, 5, 5) ;
color:#FFFFFF;
text-align:center;
z-index:2;
width:100%;
height:100%;
padding:2%;
display:none;
}

<div class="col-sm-4">
  <div class="thumbnail">
  <img src="two.jpg" alt="two" class="align-center img-responsive">
  <div class="caption">
  <h3>Women's Clothing</h3>
 <p>Shop Now !</p>
 <p><a href="" class="label label-danger" title="Shop Now"></a>
  </div>
</div>
</div>

<div class="col-sm-4">
  <div class="thumbnail">
  <img src="three.jpg" alt="three" class="align-center img-responsive">
  <div class="caption">
  <h3> Juniors Clothing</h3>
      <p>Shop Now !</p>

      </div>
  </div>
  </div>
</div>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4">
  <div class="thumbnail">
    <div class="caption">
     <h3>Men's Clothing</h3>
       <p>Shop Now !</p>
   </div>
 <img src="one.jpg" alt="one">
</div>
</div>

<div class="col-sm-4">
  <div class="thumbnail">
  <img src="two.jpg" alt="two" class="align-center img-responsive">
  <div class="caption">
  <h3>Women's Clothing</h3>
 <p>Shop Now !</p>
 <p><a href="" class="label label-danger" title="Shop Now"></a>
  </div>
</div>
</div>

<div class="col-sm-4">
  <div class="thumbnail">
  <img src="three.jpg" alt="three" class="align-center img-responsive">
  <div class="caption">
  <h3> Juniors Clothing</h3>
      <p>Shop Now !</p>

      </div>
  </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在我拍摄鼠标的图像上它只显示文字但是没有显示上下滑动的thumbnail.hover功能。

任何人都有任何线索，根据编码，我做错了什么。

Answer 1

这是你的CSS的问题。见下文：

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

http://jsfiddle.net/a7m2ce7u/1/