您需要在图像上方放置另一个 div 并根据您的需要设置其样式。
然后根据Bootstraps滑动等添加hide()或show()。
FIDDLE http://jsfiddle.net/g4j8B/3/
HTML:
<li class="span3">
<div class="thumbnail">
<div class="caption">
<h4>Caption Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="icon-share"></i></a>
</p>
</div>
<div class="caption-btm">Lorem ipsum dolor sit amet, consectetur adipisicing eli...</div>
<img src="http://placehold.it/600x400" alt="ALT NAME">
</div>
<h4>Item Name</h4>
</li>
CSS:
.caption-btm{
background: rgba(0,0,0,0.6);
width: 100%;
height: 30px;
position: absolute;
bottom: 4px;
color: #fff;
}
JQuery:
$('#hover-cap-4col .thumbnail').hover(
function() {
$(this).find('.caption').slideDown(250);
$('.caption-btm').hide(100);
},
function() {
$(this).find('.caption').slideUp(250);
$('.caption-btm').show(450);
});
EDIT
上面的 Jquery 将显示和隐藏每个 .caption-btm。
但这会隐藏它所悬停的特定位置:
FIDDLE http://jsfiddle.net/HP53R/
Jquery:
$('#hover-img .thumbnail').hover(
function () {
$(this).find('.caption').slideDown(250);
$(this).find('.caption-btm').hide(250);
},
function () {
$(this).find('.caption').slideUp(250);
$(this).find('.caption-btm').show(250);
});