CSS transition de fondu sur le vol stationnaire

J'ai rencontré un problème avec CSS transitions. Je suis de la conception d'un CSS galerie pour mon portefeuille et j'ai besoin de mes images en fondu sur le vol stationnaire.
J'ai été jouer avec pendant plus d'une heure et j'espérais que quelqu'un pourrait me pointer dans la bonne direction.

Ici est une version simplifiée avec JSFiddle

OriginalL'auteur kwh71787 | 2012-10-20

  1. 42

    Je vous recommande d'utiliser une liste non ordonnée pour votre galerie d'images.

    Vous devez utiliser mon code, sauf si vous voulez que l'image à gagner instantanément une opacité de 50% après vous passez la souris. Vous aurez une transition plus en douceur.

    #photos li {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

#photos li:hover {
    opacity: 1;
}

    OriginalL'auteur giannis christofakis

  2. 14

    Cela fera l'affaire

    .gallery-item
{
  opacity:1;
}

.gallery-item:hover
{
  opacity:0;
  transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -webkit-transition: opacity .2s ease-out;
  -o-transition: opacity .2s ease-out;
}
    Vous avez oublié de placer les secondes de mesure de l'unité sur le -moz-transition
    Il a été d'avoir opacity mis sur la non-:hover élément que la cause de mon problème.
    Aussi ce sera snap back 0,0 vitesse lorsque vous relâchez le hover

    OriginalL'auteur Darwayne