Just a little nitpick, the container/overlay method you have there -- on top of being pointless DIV and classes for nothing -- disables the anchor in most browsers because you put the pointless "overlay" atop it.
None of those DIV serve any legitimate purpose... nor really does the class="image" on a IMG tag. (really, an IMG is an image? Whoddathunkit?!?")
Put the text in a span, put the span inside the anchor, put a class on the anchor to say WHY it is getting style (not what that style is). Inline-block and relPo the Anchor, aPo the SPAN, then do the hover on the Anchor where it BELONGS.
Also rather than saying top/bottom/left/right just say top/left and set the width/height. One less property to worry about.
Oh, and on .dropcap, you should probably just lower the line-height rather than messing with negative margins... much less mixing px with a % font-size? /FAIL/ at accessibility.
Remember, any time you use PX in a layout for anything other than images and the occasional border or shadow? /FAIL/ at accessibility. It's called EM, use 'em!