Pop Hover CSS with Box Display

[a404freedom]

Let me start by noting that CSS is very new to me so i'm learning as I go. I retrieved code from CSS-Tricks.com for a pop hover box and everything runs beautifully. I just need to make some fine tune adjustments and add something that I KNOW is quite simple, just dont know how to revise the code. Below are the two things I'm attempting to accomplish:

1. I'm trying to do is make the text at the bottom (appears on hover) animate in the same direction as the orange box coming up so it looks seemless.
2. Create a replicated textbox that appears on hover.

Here is the code:

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

* {
  box-sizing: border-box;
}

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

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

.box, #appear {
  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%, #f87b00 50%, #f87b00
  );
  background-size: 100% 202%;
  transition: all 0.2s ease;
  animation: down-bump 0.4s ease;
}
.box h2 {
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -1.5px;
  line-height: 1.2;
}
.box h3 {
  font: 0.8em "Lucida Grande", serif;
  color: #ffffff
}

.box:hover {
  background-position: 100% 50%;
 
  animation: up-bump 0.4s ease;
  color: #575858; } 
  

.box:hover h2 {
  margin-top: 130px;
  color: #000000;
  font-family: arial; 
}
  
.box:hover h3 {
  color: #fff;
  padding: 5px 0px;
}

@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; }
}

So all in all, what I need, is on hover, make the font animate upwards from the bottom and then have a box appear to the right where I can then provide information.

THANK YOU THANK YOU THANK YOU!!!!!!!!!!