Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Анимация для фильтра и режима наложения (https://javascript.ru/forum/xhtml-html-css/58910-animaciya-dlya-filtra-i-rezhima-nalozheniya.html)

spo 17.10.2015 02:37
Анимация для фильтра и режима наложения
 
Исходные данные:
  • Контейнер-родитель с цветом фона (background-color)
  • Ребенок-изображение (img, а не background-image) с применением режима наложения (mix-blend-mode: luminosity) и фильтром размытия (filter: blur(5px))
Задача: добиться чтобы при наведении курсора на контейнер-родитель у него плавно (transition: 2s) исчезал цвет фона, а изображение плавно (transition: 2s) приходило в исходное состояние - без наложения и без размытия.

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

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

Decode 17.10.2015 02:50 
<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 17.10.2015 02:58
Decode, большое спасибо, но я немного напутал с исходными данными. Размытие должно быть для всех элементов которые попадут в контейнер-родитель, а потому фильтр размытия хотелось бы сделать один для этого контейнера а не для каждого из потомков.

Decode 17.10.2015 03:00
spo, измени селектор тогда:
.parent:hover > *


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

spo 17.10.2015 03:05
Цитата:
Сообщение от Decode (Сообщение 392243)
spo, измени селектор тогда:
.parent:hover > *
Да я думал об этом, но должна быть возможность размытия и для фона картинки у родительского контейнера :)

Decode 17.10.2015 03:08
Цитата:
Сообщение от spo
но должна быть возможность размытия и для фона картинки у родительского контейнера
Ну а в чем проблема размытие повесить на родительский блок?


Часовой пояс GMT +3, время: 19:42.