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

See on Fiddle

注意：请在整个屏幕上全屏查看它的工作情况,