Transition CSS not working properly.

[BryGuy]

The site in question: http://www.bornsquishy.com

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.

[BryGuy]

anyone?

[Historical Forums User]

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

[BryGuy]

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

[BryGuy]

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

[Author]

Posts