Grow your CSS skills. Land your dream job.

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

  • # September 10, 2012 at 10:54 am

    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

    # September 10, 2012 at 1:43 pm

    Very clever idea!

    # September 10, 2012 at 2:00 pm

    I thought it was neat. I have absolutely no idea what sort of use it actually has but it could be combined with other stuff like scale to make boxes bigger and fade stuff out.

    # September 10, 2012 at 3:38 pm

    Nice I like it. I could really see something like this becoming very useful to help someone walk through a few core ideas. I can see it being very useful if used far more subtle (like say 5% or 10% opacity) to highlight something you want someone to read.

    # September 10, 2012 at 3:48 pm

    Yeah that’s kind of what I was thinking. Maybe in some sort of signup or order process where you can add a class (instead of hover) like .active {} to the column in use, so if they’re filling out forms or something.

    I think I’m gonna mess about with it some more!

    # September 10, 2012 at 7:22 pm

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

    # September 11, 2012 at 3:13 am

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

    # September 11, 2012 at 3:48 am

    Well I’m not too concerned with performance, it wasn’t laggy at all for me…
    I loved the idea…

    though i think something like http://codepen.io/DesignNinjaNet/pen/uFwIp would be a tad more practical, i still love seeing new ideas come to light, so i have nothing to complain about!

    Post updates if you develop anything more on this!

    # September 11, 2012 at 4:12 am

    What if we were to add a black HTML background and then turn opacity on for all other elements when hovering a desired box? How practical is that without JS being involved?

    Compared to box-shadow would the rendering be faster/less intensive?

    # September 11, 2012 at 4:27 am

    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;
    }
    # September 11, 2012 at 4:51 am

    Can you throw your idea into a codepen/jsfiddle? I’m having a hard time visualising it.

    # September 11, 2012 at 6:46 am

    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. :)

    # September 11, 2012 at 7:21 am

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

    # September 11, 2012 at 7:34 am

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

    # September 11, 2012 at 7:41 am

    I like it. What if we made the first column hover the default state? Would that get rid of the flash?

Viewing 15 posts - 1 through 15 (of 23 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".