<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Hovers from <a target="_blank" href="http://www.popagency.com/">pop</a></h1>

<a href="#" class="box">
  <h2><span>Breaking news -</span> hippos are sorta dangerous</h2>
  <h3>Tonight at nine</h3>
	<div class="box-more">
	<p>Read more</p>
	</div>
</a>
<a href="#" class="box">
  <h2><span>Lunch -</span> is delicious anytime</h2>
  <h3>Even after dinner</h3>
	<div class="box-more">
	<p>Read more</p>
	</div>
</a>
<a href="#" class="box">
  <h2><span>Wakka wakka -</span> ehhhhhh wakka wakka</h2>
  <h3>honk honk</h3>
	<div class="box-more">
	<p>Read more</p>
	</div>
</a>
<a href="#" class="box">
  <h2><span>Thin gray lines -</span> the new thick black lines</h2>
  <h3>you heard it here</h3>
	<div class="box-more">
	<p>Read more</p>
	</div>
</a>

@import url(https://fonts.googleapis.com/css?family=Merriweather);

* {
  box-sizing: border-box;
}

body {
  font-family: 'Merriweather', serif;
  padding: 50px;
}

a {
  color: #f06d06;
  text-decoration: none;
}

   
.box {
  padding: 2em;
  border: 1px solid #ccc;
  display: block;
  width: 40%;
  height: 300px;
  float: left;
  margin: -1px 0 0 -1px;
  color: black;
  background: linear-gradient(
     white, white 50%, #333 50%, #333
  );
  background-size: 100% 202%;
  transition: all 0.2s ease;
  position:relative;
  overflow:hidden;
}
 
.box h2 {
  letter-spacing: -1.5px;
  line-height: 1.2;
}
.box h3 {
  font: 0.8em "Lucida Grande", serif;
}

.box:hover {
  background-position: 100% 100%;
  animation: up-bump 0.4s ease;

}
.box:hover h2 {
  color: #48ad26;
}
.box:hover h2 span {
  color: white;
}
.box:hover h3 {
  color: #999;
}
.bump-down{animation: down-bump 0.4s ease;}


.box:hover .box-more {
  top: 80%;
}


@keyframes up-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 1.5em; }
  100% { padding-top: 2em; }

}
@keyframes down-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 2.5em; }  
  100% { padding-top: 2em; }
}


.box-more {
position:absolute;
background:#fafafa;
color:#686868;
top:100%;
left:32px;
padding:10px;
transition: all 0.2s ease;
}

$(function(){
  $(".box").mouseout(function(){
    $(this).addClass("bump-down");
  });
});