Grow your CSS skills. Land your dream job.

Proof of Concept CSS Trick – please help!

  • # January 30, 2013 at 5:48 am

    Hi!

    I’m trying to make a pure CSS website with some animations. The main goal is to have something as similar as possible to this, but without JS: http://lab.hakim.se/meny/ .

    Right now I have code that works ONLY IN GOOGLE CHROME, and with problems: http://codepen.io/kyvaith/pen/xsrav
    The site flicker on mouseover, because hover effect is applied to div with contains both menu and main container. Main container is just moved to right with margin-left, outside the base div.

    The code is complete invalid. Is there any way to do it right?

    # January 30, 2013 at 1:48 pm

    I’m not seeing a flicker in Chrome.

    # January 31, 2013 at 2:55 am

    It looks great on my Chrome Canary 26 too.

    Edit: pretty nice work by the way.

    # January 31, 2013 at 3:13 am

    Well… For me, the above code causes the main container jumps when you move the mouse over it. Try to move the mouse slowly over it. It looks like he could not decide whether to be in the container from which it was ejected by transform: translateX or not. Anyway, the problem was solved. Here is the working code (uses: target but for me it does not matter): http://codepen.io/kyvaith/pen/Djrew
    I did everything again from the beginning. The last thing is to achieve compatibility with non-WebKit browsers :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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