Анимация для фильтра и режима наложения

[spo]

Исходные данные:

• Контейнер-родитель с цветом фона (background-color)
• Ребенок-изображение (img, а не background-image) с применением режима наложения (mix-blend-mode: luminosity) и фильтром размытия (filter: blur(5px))

Задача: добиться чтобы при наведении курсора на контейнер-родитель у него плавно (transition: 2s) исчезал цвет фона, а изображение плавно (transition: 2s) приходило в исходное состояние - без наложения и без размытия.

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

Прошу помощи.

[Decode]

<style>
    .parent {
        width: 200px;
        background: #719cd6;
        text-align: center;
        line-height: 0;
        transition: all 2s linear;
    }

    .child {
        display: inline-block;
        mix-blend-mode: luminosity;
        filter: blur(5px);
        transition: all 2s linear;
    }

    .parent:hover {
        background: transparent;
    }

    .parent:hover > .child {
        mix-blend-mode: normal;
        filter: none;
    }
</style>

<div class="parent">
    <img class="child" src="http://placehold.it/100x100" alt="" />
</div>

[spo]

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

[Decode]

spo, измени селектор тогда:

.parent:hover > *

Или всем дочерним элементам давай класс child.

[spo]

.parent:hover > *

Да я думал об этом, но должна быть возможность размытия и для фона картинки у родительского контейнера

[Decode]

но должна быть возможность размытия и для фона картинки у родительского контейнера

Ну а в чем проблема размытие повесить на родительский блок?