CSS:

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
 font-family: 'Lato', Calibri, Arial, sans-serif;
 color: #89867e;
 background: #f9f9f9;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a {
    text-decoration: none;
    outline: none;
}
a img {
    border: none;
}
.caption {
 display: inline-block;
 position: relative;
 margin: 10px;
}
.caption img {
 display: block;
 max-width: 100%;
}
.caption::before,
.caption::after {
 opacity: 0;
 position: absolute;
 width: 100%;
 color: #fff;
 padding: 20px;
 -webkit-transition: opacity 0.3s;
 -moz-transition: opacity 0.3s;
 transition: opacity 0.3s;
}
.caption::before {
 content: attr(data-title);
 top: 0;
 height: 30%;
 background: #a21f00;
 font-size: 40px;
 font-weight: 300;
}
.caption::after {
 content: '\201C' attr(data-description) '\201D';
 top: 30%;
 height: 70%;
 background: #db2e00;
 font-size: 16px;
 text-align: right;
}
.caption:hover::before,
.caption:hover::after {
 opacity: 1;
}

HTML:

<a class="caption" href="http://cargocollective.com/jaimemartinez/Illustration" data-title="Cafe Race" data-description="They were few in number, but the look in their eyes told all who beheld them that they would leave this day only in victory or death."><img src="http://tympanus.net/Tutorials/PseudoElementsImageCaptions/images/2.jpg" alt="Illustration of Cafe Racer"/></a>