Transition CSS s'estompe au survol

Question

J'ai rencontré un problème avec les transitions CSS. Je conçois une galerie CSS pour mon portfolio et j'ai besoin que mes images s'affichent en survol. Je joue avec ça depuis plus d'une heure et j'espérais que quelqu'un pourrait m'orienter dans la bonne direction.

Voici une version simplifiée avec JSFiddle

Answer 1

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 gagne instantanément une opacité de 50% après avoir survolé. Vous aurez une transition plus douce.

#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;
}

Answer 2

Ça 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;
}