Частичное наложение фильтров на фон

Не редко сталкиваюсь с элементами где необходимо изменить только часть фона. Это может быть и размытие на половину картинки и интересные анимационные переходы. В данном трюке покажу, как можно с помощью позиционирования фона применить фильтры, а так же сделать интересную анимацию

Смотрим что получилось
https://codepen.io/JustRideK/pen/daQBoL

Применив смекалку можно получить интересные переходные эффекты или просто насладиться рендером с разными фильтрами.

Чтобы получилась "картинка на картинке" мы создали блок с фоновой картинкой и к этому же блоку добавили псевдоэлемент с абсолютным позиционированием. При таком позиционировании псевдоэлемент будет "выше" самого блока, а стиль "background-image: inherit" укажет наследовать картинку от блока-родителя.
Дальше нам надо правильно подобрать размеры смещения фона у псевдоэлемента, чтобы позиция картинки "совпадала" с позицией картинки у блока-родителя, это легко делается наследуемыми стилями.

Поддержать канал для выхода новых статей вы как всегда можете вопросами в комментариях и лайками