JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <a class="type" href="">Video</a>
    <a href=""><img src="http://dl.dropbox.com/u/1762184/recent-work01.png" width="300" height="168"></a>
     <a class="title" href="">Philly</a>  
</div>

CSS

div {width:300px; height:168px; overflow:hidden; position:relative;}

.type{display:inline-block; position:absolute; top:-30px; left:0; background:orange; color:black; padding:5px; text-transform:uppercase; font-size:12px;
-webkit-transition: top;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

.title{display:block; width:280px; position:absolute; bottom:-40px; left:0; background:black;
   padding:10px; font-size:20px; text-decoration:none;
-webkit-transition: bottom;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
    color:white;
}

div:hover .title{
 bottom:0;
-webkit-transition: bottom;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;}

div:hover .type{
top:0;
-webkit-transition: top;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

.type:hover {color:white; text-decoration:none;}
.title:hover {color:orange;}