Here you go...
HTML
As your post except I added a wrapper div and took out the break tags
CSS
.wrapper {
text-align:center;
}
figure {
display: inline-block;
border:1px solid grey;
position: relative;
overflow:hidden;
}
figure a {
display: block;
}
figure:hover:before {
content: '';
display: block;
background: url(http://example4.inivex.com/wp-content/uploads/2014/02/og.png);
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
figcaption {
position: absolute;
height:50px;
line-height:50px;
background-color: grey;
bottom:-50px;
width:100%;
transition: bottom 0.5s ease;
}
figure:hover figcaption {
bottom:0;
}