All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

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!

    # September 10, 2012 at 1:43 pm

    Very clever idea!

    # September 10, 2012 at 2:00 pm

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

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

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed