Как реализовать чтоб после события :hover происходила плавная анимация?

[triatri3]

Есть такой код, волнует 2 вещи:
1) я реализовал чтоб при наведении на img происходила анимация (из чёрно-белого состояния в цветное, img:hover 2-ая строка), но после отвода от элемента мгновенно возвращается в чёрно-белое. Как реализовать плавный переход?
2) Я использовал плагин fullpage. Он довольно массовый, думаю сможете помочь. Почему-то после создания div элемента на второй странице сам этот элемент встаёт по центру. Да, я мог бы использовать margin-top: (0-50%), но хотелось бы узнать почему это реализованно именно так.
Заранее огромное спасибо.

<div class="section" id="second">
				<div id="Container">
				  <div class="icon"><img src="media/200px-Instagram_new.svg.png"></div>
				  <div class="icon"><img src="media/skype-3-logo-thumb.png"></div>
				  <div class="icon"><img src="media/240px-YouTube_full-color_icon_(2017).svg.png"></div>
				  <div class="icon"><img src="media/twitter.png"></div>
				  <div class="icon"><img src="media/image_image_2704135.png"></div>
				</div>
		</div>

#second {
	background: linear-gradient(0deg, black, #1A237E);
}
#Container {
  display: flex;
  flex-direction:row;
  Justify-content: space-around;
  margin-top: 40%;
}
img {
  width: 80px;
  filter: grayscale(100%); 

}
img:hover {
  filter: grayscale(0%);
  transition: filter 1.5s;
}

[Serge_Bliznykov]

я не специалист по HTML/CSS
поэтому предложу добавить transition в тег img

img {
  width: 80px;
  filter: grayscale(100%); 
  transition: filter 1.5s;
}

попробуйте

[triatri3]

Сообщение от Serge_Bliznykov

я не специалист по HTML/CSS
поэтому предложу добавить transition в тег img

Работает! Спасибо огромное! П.с. тут можно как-то поощрать пользователей ответивших мне? Вот вижу значение "репутация"

[Вадим Мошев]

Сообщение от triatri3

П.с. тут можно как-то поощрать пользователей ответивших мне?

Можно, вот нажмите на этот значок:
2019-02-22_21-09-43.png
Но пока ваш голос будет равен нулю: http://www.programmersforum.ru/showt...20#post1769902

[Naive]

Трансишен довольно тяжелая операция, поэтому я рекомендую ей ставить только то свойство, которое должно изменяться (сделано) и только на конкретный элемент или класс (не сделано).
В данном случае трансишен будет лепиться ко всем тегам <img/>, это плохо. Старайтесь не использовать селекторы по тегу. Почитайте про БЭМ.
UPD: трансишен на ховер стоял, когда ховер пропадает, то у него отключается и трансишен, поэтому анимация обратно не срабатывает. Анимации можно комбинировать: на :hover ставить 1 эффект, а обратно -- другой. Это первое, что хотел добавить. Второе: полторы минуты слишком долго. За это время и уснуть можно. Зависит, конечно от типа... Но в данном случае я бы поставил 150-200 миллисекунд. Ориентируйтесь на среднюю скорость реакции человека: 250мс. Мозг юзера успеет заметить анимацию, но по завершении уже будет готов реагировать на ее результат.