Simple CSS3 fade in/out sprite image navigation?

Question

I'm trying to create a horizontal menu that will display a list of icons with centered text underneath.

This is what i have achieved so far:

http://lifeofstrange.com/fade/

I would like the icons to use one image sprite that will fade in/out when you hover, if possible the text underneath will also have the fade effect.

I'm very close to achieving the effect however i'm not sure where the css3 transitions would be in the code,

Your help or assistance is much appreciated.

Answer 1

If you want a fade transition on the arrow and text, then you won't want to be changing the color of the text and the position of the arrow background. What you will want to do is set the background to be the darker arrow, and then when you hover set the opacity of it to say 0.6 or something, and same with the text. If you transitioned the background position you would see a slide effect from one part of the sprite to the other, and this isn't what you want.

ul li a {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
ul li a:hover {
    opacity: 0.6;
}