Inconsistent box-shadow when altering opacity and background
===

I have [this jsFiddle][1]. When any of the blocks is hovered, it expands (by replacing its margin with padding) and gets a box-shadow, whereas the rest of the blocks become translucent via jQuery.

None of the elements has a defined background, so it gets white by default, and inside each block is a mostly white image. However, as you can see, the hovered block's `box-shadow` isn't uniform: it varies depending on whether it's over a white bg (the images) or an *undefined* bg (the rest of the blocks, the space between them).

Setting the background for `div.block`s to white [solved part of the problem][2], i.e. the shadowing over the entire block is the same; however I can't seem to do anything about the spaces *between* blocks.

Should jQuery also do something to the hovered block's parent container? Would the use of rgba instead of opacity help?

  [1]: http://jsfiddle.net/TMXLz/6/
  [2]: http://jsfiddle.net/TMXLz/8/