Inconsistent box-shadow when altering opacity and background

I have this jsFiddle
. 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
, 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?

Problem courtesy of: willf

Solution

I’m not entirely certain I understood your issue, but building upon your second fiddle, I believe adding this css
helped make the shadow look better (
see fiddle

), which I think resolves the issue you are referring to:

div.block.expanded {
    position: relative;
    z-index: 2;
}

Solution courtesy of: ScottS

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Inconsistent box-shadow when altering opacity and background

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录