Как осуществить плавный переход от картинки к картинке?

Question

[sts]

Есть сайт natalyland.ru, там покрывало(с кошечками) постепенно сливается с бекграунд фоном. Дайте направление куда гуглить и как такой эффект правильно называется.
ps я back-dev, и совсем не знаю как этот вопрос задать в гугле.

Comments

[Ярослав Иванов]

Это обычная png прозрачность. natalyland.ru/data/images/site/top.png

[sts]

Ярослав Иванов: я нагулил alpha channel, это оно ?

[Ярослав Иванов]

stunoff: У вас в примере на сайте обычная пнг картинка с прозрачностью. Никакого отношения к скриптам не имеет. Если хотите прозрачность то гуглите opacity.

[sts]

Ярослав Иванов: Всё, понял. Напишите Ваш ответ в "ответах", я отмечу его как решением. Спасибо

Answer 1

[Ярослав Иванов]

На сайте обычная png картинка с прозрачностью. Никакого отношения к скриптам не имеет. Если хотите прозрачность то гуглите opacity.

www.w3schools.com/cssref/css3_pr_opacity.asp

Answer 2

[Андрей Федоров]

css не так аккуратен как photoshop, но попробуйте так codepen.io/aliencash/pen/gLvaXx

Comments

[sts]

Интересный эффект, но это несколько не то что нужно.

[Андрей Федоров]

stunoff: В чем вы видите ключевые отличия?

[sts]

Андрей Федоров: я далеко не фронт-енд разраб, но как я увидел, что ваш вариант как бы накладывается на основное фото, а вариант Ярослав Иванов наоброт будет за основным фото(сливаться сним). Причем будет "сливаться" в "пустых" местах основного фото

[Андрей Федоров]

stunoff: Вы не понимаете принципа. Я из основного фото и градиентов делаю нужный фон. Это в любом случае фон. Поверх вы можете накладывать все что хотите. Пример codepen.io/aliencash/pen/YpeyOZ

[sts]

Андрей Федоров: Всё, немного принцип понял. Спасибо