Fun from hover effect from messing around with box-shadow & transitions (Codepen inside)!

[Andy Howells]

Hey all,

Thought I’d share this tidbit.

Was messing about with box-shadow while developing a customer site by adding 500000px as the spread radius.

The result is quite cool – obviously the box-shadow blur and spread don’t need to be quite that big, but this might be handy if you want to focus attention on a particular section of a site when someone hovers over it, effectively fading out the other content.

Codepen ahoy!

http://codepen.io/andyunleashed/pen/wcEGd

[TheDoc]

Very clever idea!

[joshuanhibbert]

Something important to keep in mind: box-shadow is one of the slowest CSS properties to render. It isn’t too bad in small amounts, but with such a monstrous spread value, it is going to cause some slower machines to suffer :(

[Kitty Giraudel]

Sweet but laggy. Very laggy. You can’t decently apply a box-shadow this huge. :)

[Kitty Giraudel]

So, I tried quite a few things, but nothing wonderful. Actually we would really need a parent selector. With such a thing, we could do something like this :

html:after {

content: "";

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

background: rgba(0,0,0,0.5);

z-index: 2;

display: none;

}

.column {

z-index: 3;

}

.column:hover < html:after {

display: block;

}

[Kitty Giraudel]

This : http://jsfiddle.net/weYYR/2/.
But I have to use an extra-element to do this. With a CSS parent selector, I could this with a pseudo-element instead. :)

[joshuanhibbert]

@HugoGiraudel The only issue with that is the insane flashing when hovering the different elements! Nice work though :)

[Kitty Giraudel]

Yeah, not perfect. I hadn’t much time to do it.

[Kitty Giraudel]

Nah, I don’t think so. The flash comes from the CSS transition used. If you don’t want any flashes, you would consider something like this : http://jsfiddle.net/weYYR/5/.

No more transitions, no more flashes.

[Kitty Giraudel]

Actually, it still flashes, but very quickly. It’s much better, but still not completely right. So if you want to avoid every flashes, you might want to remove gaps between columns : http://jsfiddle.net/weYYR/6/.

And if you want to keep the gap, but want to avoid all flashes, let’s do some CSS tricks : http://jsfiddle.net/weYYR/7/ !

[Kitty Giraudel]

Please, let me know. :)

[Kitty Giraudel]

Fixed some various bugs : http://codepen.io/HugoGiraudel/pen/fbyim.

Right now I can see two big issues :

1. We use an extra element to achieve this effect (.mask).

2. We can’t set position: relative to the wrapper (.container), or the mask will only cover the wrapper, not the whole page. The solution would be to move the .mask from the wrapper to the body tag, but we won’t be able to target it with the sibling selector (.column:hover ~ .mask).

[Kitty Giraudel]

CSS transitions are pretty light if no mistake, so you can probably use them.

[Author]

Posts