我有以下小提琴：
http://jsfiddle.net/nyube8aw/
HTML：
<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动画.请参见下面的示例.
$(document).ready(function() {
$('.Box').mouseenter(function(){
$('.caption').stop().animate({height: "94%"});
});
$('.Box').mouseleave(function(){
$('.caption').stop().animate({height: "15%"},500,function() {
});
});
});
.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%; } }
<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>
注意：请在整个屏幕上全屏查看它的工作情况,
