HTML5 and CSS3 doubt.

[Long_username_bad_display]

Hi, I'm new here...

I am creating my first website that will use almost all the HTML5 and CSS3 features, for fun and to get accustomed to them, but this came along...

I created an element that gets resized on mouse hover with CSS3, and I want the text to only be visible when the element is behind it, I will eventually use an image if I can't get this to work, code is here(JSfiddle).

thanks a million.

PS: the z-index isn't doing anything.

I'm using google chrome.

[Xdega]

Couldn't you simply use a mouseover for the text in the same way you are using mouseover for the background element?
It appears the background element will only show on mouseover anyways.

Also one thing to note. The animation is only working on Chrome, and the rounded borders are only working on Chrome and IE9.

[Xdega]

here is the updated .css

Code: Select all

#Home
{
    display:block;
    position:relative;
    font-size:2em;
    width:25px;
    height:43px;
    background-image:url('http://www.martin.com/color/small/red305.1.gif');
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:0s;
    /*Safari and Chrome: */
    -webkit-transition-property:width;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0s;
    /*Opera: */
    -o-transition-property:width;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
    border-radius:10px;
    z-index:2;
}

#Home:hover
{
    width:79px;
}

.menu-text
{
    display:block;
    position:relative;
    opacity: 0; /*Firefox and Opera */
    filter: alpha(opacity=0); /*IE*/
   
        transition-property:opacity;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:0s;
    /*Safari and Chrome: */
    -webkit-transition-property:opacity;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0s;
    /*Opera: */
    -o-transition-property:opacity;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
   
}

.menu-text:hover
{
    display:block;
    position:relative;
    opacity: 100; /*Firefox and Opera */
    filter: alpha(opacity=100); /*IE*/
   
    transition-property:opacity;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:0s;
    /*Safari and Chrome: */
    -webkit-transition-property:opacity;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0s;
    /*Opera: */
    -o-transition-property:opacity;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
}

http://jsfiddle.net/8RySq/13/

I will say this. My first time playing around with some of that css stuff. Very interesting indeed. Obviously you are probably going to want to tweak your timing etc but yeh. Should work if the test was an image too. Screw the z axis idea though.

[JAB Creations]

The z-index property is for stacking, X / Y / Z axis. x is left/right, y is up/down and z is close/far.

So in example if you have two images or divisible elements that overlap each other by 50% setting the z-index to the left item to 0 and the right item to 1 will make the right item appear on top of the left item.

Keep in mind that z-index is a position related property and does not correlate with margins. You'll need to use position: absolute/relative; left/right: 50px; top/bottom: -100px; like syntax (slashes denote two different options for values, you can only use one value at a time though).