CSS3 image d'arrière-plan de la position de la transition

Je veux un CSS3 effet hover sur mon site logo. Facile, droit? Cela fonctionne bien, mais pas la façon dont je le veux.

Lien vers mon logo

La moitié supérieure de c'est l'état régulier et la moitié inférieure est le :hover état.

J'ai le standard CSS pour changer l'arrière-plan position sur :hover, mais le CSS3 transition des diapositives de l'image vers le haut et vers le bas avec la position. Au lieu de cela, je veux simplement fade in et fade out à la nouvelle position.

Est-ce possible lorsque vous travaillez avec une image et de deux positions ou vais-je devoir faire deux images distinctes (ce qui n'est pas le cas)?

  • Je pense que deux. CSS3 n'est pas un remplacement pour le JS...
  • je ne comprends pas vraiment ce que vous essayez d'atteindre, pouvez-vous donner un exemple de travail (ou au moins de préciser un peu plus - voulez-vous votre image à modifier que sa moitié supérieure, ou vous voulez que votre image de fondu de sortie et une nouvelle image fade-in)?
  • J'ai fait une page pour montrer ma situation. scferg.com/logoexamples.html
  • Vous avez besoin d'au moins 2 éléments. 1er superpositions 2e. au 1er:hover 1er de changements d'opacité à 0 => la 2ème est illustré avec "Fade". Vous pouvez utiliser le même fond(recommandé) et il suffit de jouer avec background-position.
InformationsquelleAutor Sean | 2011-04-22