Как сделать анимированный блюр/анблюр?

Question

Стоит картинка. Когда на нёё наводишь, она разблюриваеться. НО с моим кодом блюр резко появляеться и пропадает. Как анимировать блюр? Вот мой код:

.img {
filter: blur(8px);
}
.img:hover {
filter: none();
}

Answer 1

Добавить transition

.img {
  filter: blur(8px);
  transition: all 1s;
}

.img:hover {
  filter: none;
}

<img class="img" src="https://westmetroeye.com/wp-content/uploads/2014/09/famliy.jpg">