@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 { position: absolute; left: 100%; width: 90%; margin: 0 0 0 10%; font-weight: 300; color: #89867e; } .caption::before { content: attr(data-title); top: 0; height: 25%; padding: 5px 30px 15px 10px; font-size: 40px; border-bottom: 1px solid rgba(0,0,0,0.1); } .caption::after { content: attr(data-description); top: 25%; padding: 20px 10px 0; font-size: 18px; }
<a class="caption" href="http://cargocollective.com/jaimemartinez/Illustration" data-title="Smug Eagle" data-description="I watched the four riders raise their weapons into the air. Without warning, screaming their war cry. They led the attack, down to the battle they rode."><img src="http://tympanus.net/Tutorials/PseudoElementsImageCaptions/images/1.jpg" alt="Illustration of Smug Eagle" /></a>