Grow your CSS skills. Land your dream job.

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

  • # September 11, 2012 at 7:53 am

    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.

    # September 11, 2012 at 7:56 am

    I see what you mean – we’re definitely on the right track. I think the objectives should be – super light weight CSS that renders fast and not too much requirements for the HTML.

    We could definitely be on to a handy technique here to avoid using javascript all together for stuff like modals etc.

    # September 11, 2012 at 8:03 am

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

    # September 11, 2012 at 8:14 am

    Now that Hugo, is what I like to call “the balls” – totally nailed it with /7!

    Now to figure out a use case where it will come in handy. Will see what I can come up with!

    # September 11, 2012 at 8:19 am

    Please, let me know. :)

    # September 11, 2012 at 8:48 am

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

    # September 11, 2012 at 12:35 pm

    I tried messing about with :before/:after on the container but it unravelled into madness so I think keeping an external element is probably the most straightforward approach.

    Re: transitions – are there potential rendering problems (read lag/memory strain) with that?

    # September 11, 2012 at 6:14 pm

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

Viewing 8 posts - 16 through 23 (of 23 total)

You must be logged in to reply to this topic.

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