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!

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store