Blog Teaser

Using CSS3 transitions to display additional teaser content over an image.

My lovely bride is digging symemetrical boxes lately, and she would like our blog to reflect this new design aesthetic. I’m testing out a concept where older posts use an image as the click to action and slides teaser copy on hover. Here’s what I’m chewing on thus far.

My current challenges:

Multi-line headers
How do I ensure, without JavaScript, the whole header displays?
Non-static starting position
Instead of hardcoding -8em as a starting point, I would like to be able to set the header to position bottom but also have the text follow relatively.