CodePen

HTML

            
              <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>
</a>
<a href="#" class="box">
  <h2><span>Lunch -</span> is delicious anytime</h2>
  <h3>Even after dinner</h3>
</a>
<a href="#" class="box">
  <h2><span>Wakka wakka -</span> ehhhhhh wakka wakka</h2>
  <h3>honk honk</h3>
</a>
<a href="#" class="box">
  <h2><span>Thin gray lines -</span> the new thick black lines</h2>
  <h3>you heard it here</h3>
</a>
            
          
!

CSS

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

* {
  box-sizing: border-box;
}

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

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

.box {
  padding: 2em;
  border: 1px solid #ccc;
  display: block;
  width: 50%;
  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;
  animation: down-bump 0.4s ease;
}
.box h2 {
  font-weight: 400;
  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;
}

@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; }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................