Easiest way to transition an overlay on hover over a photo?

I’m looking for css magic here. I want the user to hover over the box which already has the text on it. Then I need the black box to rise up from below and sit behind the text.

MY JS FIDDLE HERE!

I’ve got this:

<div class="box expanded">
  Some text
</div>

My CSS:

.expanded {
  height: 179px;
  font-size: 20px;
  padding-top: 130px;
  position: relative;
  z-index: 1000;
  background-color: red;
  transition: transform 0.4s;
}

.expanded:after {
  content: '';
  position: absolute;
  height: 80px;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: -999;
  background-color: #000;
  transform: translateY(0%);
  transition: transform 0.4s, opacity 0.1s 0.3s;
}

solution

Add overflow:hidden to the parent, .box, and set the initial position of the pseudo element to top:100%. On :hover of the pseudo element, transition it to top:0 and add some transition properties to make it smooth.

UPDATED EXAMPLE HERE

.box {
  overflow:hidden;
}
.expanded:after {
  content:'';
  position: absolute;
  height: 80px;
  width: 100%;
  top:100%;
  left:0;
  z-index: -999;
  background-color: #000;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
}
.expanded:hover:after {
  top:0;
}