CSS-фильтр не работает в Firefox или IE

Question

Я пытаюсь использовать фильтр CSS, чтобы размыть изображение при наведении курсора.Изображение содержится в кнопке.Работает в Opera, Chrome и Edge.Это не работает в Firefox или IE.Если я добавлю фильтр на саму кнопку, он будет работать во всех браузерах, но я бы предпочел, чтобы только изображение было размытым.Любая помощь будет оценена.CSS

button>img:hover {
  filter: blur(2px);
}

HTML

  <button type="button">
    <img src="http://factory38.com/gallery-images/tree_thumb.jpg" width="200" alt="tree">
</button>

Демо

https://codepen.io/mrsmith71/pen/wjYoOY

Answer 1

filter, похоже, находится на экспериментальной стадии и не поддерживает некоторые браузеры.

Однако причина, по-видимому, здесь иная, в Firefox, где я тестировал, изображение не считается наведенным, это кнопка, так что это будет работать (:hover на кнопке вместо изображения):

button:hover img {
  filter: blur(2px);
}

button{
  width: 300px;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

<button type="button">
    <img src="http://factory38.com/gallery-images/tree_thumb.jpg" width="200" alt="tree">
</button>

Редактировать : протестировано и работает на Firefox, Chrome и Edge