The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #39762
    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!


    Very clever idea!


    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 :
    But I have to use an extra-element to do this. With a CSS parent selector, I could this with a pseudo-element instead. :)


    @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 :

    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 :

    And if you want to keep the gap, but want to avoid all flashes, let’s do some CSS tricks : !

    Kitty Giraudel

    Please, let me know. :)

    Kitty Giraudel

    Fixed some various bugs :

    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.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.