CSS only Direction Aware Hover - Oct 2013Modern browsers only

With contributions fromSitepoint members

• This is the message
• This is another message
• Message
• Apart from this message which is longer still
• This is the longest message so far
• Apart from this message which is longer still
• Even more Messages
• This is nearly the last message
• This is the penultimate message
• Finally as the end of the messages

Move your mouse slowly across the image from one of 4 directions (North, East, West,South) and the overlay message will fly in from that side.
Using tab on the keyboard will just slide the message from the top

IE9 and under (down to IE6) just get a hover effect and no animation.