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

Question

I want to have caption hover effect in thumbnail and for this i did coding like this

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

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

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

On image when i take mouse it only shows text but thumbnail.hover function of slide up and down is not showing.

Anyone have any clue what is it that i am doing wrong as per coding.

Answer 1

It was a problem with your CSS. See below:

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