Treehouse: Grow your CSS skills. Land your dream job.

Transition CSS not working properly.

  • # May 4, 2012 at 8:34 pm

    The site in question:

    On the top left side you’ll see the welcome carpet. The transition for the carpet (in it’s current format) is working as intended. Unfortunately, the carpet is meant to be hidden behind the welcome box, with only a small portion of it sticking out. When you hover over the exposed portion, the carpet is supposed to slide out.

    Here’s the current CSS:

    .welcome-mat  {
    -moz-transition: all 0.26s ease-out 0s;
    position: absolute;
    left: -6%;
    top: 50px;
    z-index: 1;

    .welcome-mat:hover {
    position: absolute;
    left: -25%;

    If I change the “.welcome-mat” z-index from 1 to -1 to hide it, it ceases to transition when you hover over the exposed edge of the mat.

    I only have it coded for moz right now.

    # May 5, 2012 at 11:30 am


    # May 5, 2012 at 11:49 am

    You have to set a z-index for the welcome-box as well.
    If you want you can then remove the z-index from you mat

    # May 5, 2012 at 12:50 pm

    Thanks affelarsson. What would I have to do if I eventually wanted to have the image appear on the bottom of everything?

    # May 8, 2012 at 11:55 am

    After watching Video #40 “How z-index Works“. The video didn’t seem to load right, but after leaving a comment it did. Hopefully it works now.

    After watching the video I realized the reason my z-index wasn’t working as planned was because all the stack (including the one on the bottom) need to have a declared “position” attribute of either “absolute” or “relative” for the z-index to work correctly. The video makes better sense of this than I have ;)

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

You must be logged in to reply to this topic.