J'ai trouvé une solution qui a fonctionné pour moi...
Si vous avez un élément de liste (ou div) contenant uniquement le lien, et disons que c'est pour les liens sociaux sur votre page vers facebook, twitter, etc. et que vous utilisez une image sprite, vous pouvez le faire :
<li id="facebook"><a href="facebook.com"></a></li>
Faites de l'arrière-plan des "li" l'image de votre bouton.
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
Ensuite, l'image d'arrière-plan du lien devient l'état de survol du bouton. Ajoutez également l'attribut d'opacité à ce bouton et fixez-le à 0.
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}
Maintenant, tout ce dont vous avez besoin est "opacité" sous "a:hover" et définissez-le à 1.
#facebook a:hover {
opacity:1;
}
Ajoutez les attributs de transition d'opacité pour chaque navigateur à "a" et "a:hover" afin que le css final ressemble à ceci :
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
Si je l'ai expliqué correctement, cela devrait vous permettre d'avoir un bouton d'image de fond qui s'estompe, j'espère que cela vous aidera au moins !