I currently have a div that when hovered shows another div in it's place, the div shown in it's place has a `box-shadow` of 1 px on all sides, I am trying to cover the top shadow line so that the shadow is only shown on the left, right and bottom. 

Edit: I would like the shadow to remain on all 4 sides but to be covered by a div on the top. Not the vertical axis changed. I'm wondering if this is possible.

<http://jsfiddle.net/8yeh9cw6/>

Is this possible to cover or will it always bring the shadow to the top of anything? Ideally with pure css, otherwise is it possible with jquery or javascript?