Image captions

I am having trouble with this tutorial http://www.hongkiat.com/blog/css3-image-captions/ . I am working on caption one. What is my code missing?

.project .box img { position:absolute; left:0; -webkit-transition: all 300ms ease-ou; -moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
} .project .box .caption { background-color: rgba(0,0,0,0.8); position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
} .project .box .simple-caption { height:30px; width:100%; display:block; line-height:1em; text-align:center; }

.project .box:hover .simple-caption{ -moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%); transform: translateY(-100%);
}

<div class="project box"><a href="http://dnapllc.com/"><img src="images/dittrich.jpg"> <span class="caption simple-caption">
<p>Simple Caption</p>
</span>
</a></div>