Drop a shadow on the bottom-right side of the Hovercard.
Yeah thats certainly not a good look, based on how your code is, will either of these work out better? you get a similar enough look with an inner box shadow, and it has the upside of being more consistent with the other controls.
the shadow I'm proposing is inside, the one from facebook is still outside. Also we're not using soft shadows anywhere else so it could be odd. I thought the issue was we can't have the shadow outside for some reason?
Can we try doing a regular drop shadow/ outer glow that applies to the entire card (like the facebook/ national geographic screenshot)
What this will accomplish:
It will create depth between the card and the background.
If i'm correctly understanding, we wont have to deal with the position of the pokey.
I have discussed the consistency concern with Jared, but IMO, this seems to be the simplest way to work around the pokey issue and the enormous testing involved.
Also we're not using soft shadows anywhere else so it could be odd.
We are using soft shadows. The most prominent shadowed UI element on Wikipedia is the notifications pop-up which uses:
box-shadow: 0 3px 8px rgba( 50, 50, 50, 0.35 );
This is a very soft shadow and looks a lot better IMO than the hard-edged shadow.