Thumbnail Caption парение эффект в начальной загрузке

Question

Я хочу иметь заголовок парение эффекта в миниатюре и для этого я сделал кодирование как этого

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

На изображении, когда я взять мышь это только показывает текст, но 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/