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!!!!!!!!!!