Si8 Si8 - 4 months ago 18
Javascript Question

How to show partial caption and on hover slide up the entire caption

I have the following fiddle: 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>


How can I modify the code so the H3 stays visible until hover which scrolls the entire content up.

Answer

Another method would be jQuery animate. See the example shown below.

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

Note: Please go full screen on the snippet to see it at work,