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.
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.
Vous devez vous connecter pour publier un commentaire.
Vous n'avez pas besoin de deux images distinctes, mais vous avez besoin de deux éléments distincts dans lequel la position de votre logo.
Voir la version live ici: http://jsfiddle.net/BdY79/
Dans la pratique, vous voulez probablement le lien de votre logo et vous pouvez utiliser la balise pour ce faire, donc il n'y a pas de supplément de balisage. Elle a également dégrade gracieusement.
Cela ne fait pas mention de la position de fond de l'animation...
Webkit seulement 🙁
Via: http://jsfiddle.net/hfXSs/
Plus ici: http://css-tricks.com/parallax-background-css3/
Oui c'est possible, mais vous ne pouvez pas utiliser une simple transition, vous aurez à utiliser un CSS animation avec 4 images clés
https://gordonlesti.com/css-background-transitions-with-image-sprites/