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

Question

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="https://i.sstatic.net/46ccz.jpg" />
</div>

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

Answer 1

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="https://i.sstatic.net/46ccz.jpg" />
</div>

See on Fiddle

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

Answer 2

One approach (without jQuery; pure CSS), would be to set a max-height on the .caption element. In addition, set a value for the transition property too. Then when hovering over the .box element, increase the max-height of the .caption element to 100%.

Updated Example

.caption {
    /* other styling.. */
    max-height: 120px;
    transition: max-height 2s ease;
}
.box:hover .caption {
    max-height: 100%;
}

You can also transition a min-height:

Take a look at this updated example to see that it works for dynamic amounts of content.

.caption {
    transition: min-height 1s ease;
    position: absolute;
    bottom: 0;
    min-height: 40px;

}
.box:hover .caption {
    min-height: 100%;
}