我有以下小提琴：
http://jsfiddle.net/nyube8aw/
HTML：
@H_404_4@<div class="Box"> <div class="caption"> <h3>This is Image One</h3> <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nulla commodo dolor in dui lacinia gravida.</p> </div> <img src="http://i.stack.imgur.com/46ccz.jpg" /> </div>解决方法
另一种方法是jQuery动画.请参见下面的示例.
@H_404_4@$(document).ready(function() {
$('.Box').mouseenter(function(){
$('.caption').stop().animate({height: "94%"});
});
$('.Box').mouseleave(function(){
$('.caption').stop().animate({height: "15%"},500,function() {
});
});
});
@H_404_4@.Box {
position: relative;
float: left;
width: 300px;
height: 300px;
margin-right: 20px;
}
.last {
margin-right: 0;
}
.caption {
position: absolute;
background: #000;
opacity: 0.7;
bottom: 0;
left: 0;
width: 90%;
height: 15%; /* Auto can still work for the height */
padding: 5%;
color: #fff;
padding-top:1%;
}
.full-height {
height: 90%;
}
}
@H_404_4@<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Box">
<div class="caption">
<h3>This is Image One</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nulla commodo dolor in dui lacinia gravida.</p>
</div>
<img src="http://i.stack.imgur.com/46ccz.jpg" />
</div>
注意：请在整个屏幕上全屏查看它的工作情况,
