Retaining Text when fading an Image with Sprite for Sliding Door?

[RottNKorpse]

Ok I realize this is weird as most use the text-indent parameter to hide the text on this type of thing but I want to retain the text as I am using the Sliding Door nav technique.

So I want to display text with no background and then fade the background in while utilizing a sliding door background. Everything works great except for the text displaying before the fade in…which of course makes sense with the fade technique even without using the text-indent removal due to the Zero Opacity.

I want to know if there is a way to make the fade and the sliding door work while displaying the text either independently or redundantly if need be during zero opacity stage?

Markup:

Home

CSS:

a.btntest {background: transparent url('../images/nav-bg-right.png') no-repeat scroll top right;color:#e5e5e5;text-decoration:none;font-weight:bold;display:block;float:left;height:38px;margin-right:6px;padding-right:5px;font-family:Verdana, Arial;text-shadow:1px 2px rgba(0,0,0,0.5);opacity:0;-webkit-transition:opacity 0.5s ease-in;-moz-transition:opacity 0.5s ease-in;-o-transition:opacity 0.5s ease-in;transition:opacity 0.5s ease-in;}

a.btntest:hover {background: transparent url('../images/nav-bg-right.png') no-repeat scroll top right;opacity:1;}

a.btntest span {background: transparent url('../images/nav-bg-left.png') no-repeat top left;display:block;height:38px;line-height:22px;padding:8px 10px 0 15px;opacity:0;-webkit-transition:color 0.5s ease-in;-moz-transition:color 0.5s ease-in;-o-transition:color 0.5s ease-in;transition:color 0.5s ease-in;}

a.btntest:hover span {background: transparent url('../images/nav-bg-left.png') no-repeat top left;opacity:1;}

I’ve tried many many things to get this to work but every time I get the text to show it breaks either the fade or the sliding doors.

If this isn’t possible, it isn’t that big of a deal but would be quite good if it is…any ideas?

[RottNKorpse]

dang it i had the wrong code in the example…I didn’t want the color to transition…the opacity was suppose to transition.

that wont work because the span has the text and the background it because of the sliding door technique…so if I delay the span to make the text show then I also make the background show.

[Author]

Posts