Переход CSS исчезает при зависании

Я столкнулся с проблемой переходов CSS. Я разрабатываю галерею CSS для своего портфолио, и мне нужно, чтобы мои изображения исчезали при наведении. Я играл с этим больше часа, и я надеялся, что кто-то сможет указать мне в правильном направлении.

Вот упрощенная версия для него с JSFiddle

Ответ 1

Я рекомендую вам использовать неупорядоченный список для вашей галереи изображений.

Вы должны использовать мой код, если вы не хотите, чтобы изображение мгновенно получило 50% непрозрачности после того, как вы наведете курсор. У вас будет более плавный переход.

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

Ответ 2

Это сделает трюк

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