Плавный переход от карандашного эскиза к картинке

[rafaelo]

Привет всем.
Есть необходимость сделать плавно изменяющийся background-image от карандашного эскиза до оригинала картинки.
Ясно, что для этого надо из основной картинки сделать карандашный эскиз (в инете много информации, в том же фотошопе например) и потом при скроллинге заменять карандашный эскиз на саму картинку.
Весь вопрос в том, чтобы сделать это именно плавно, без резкой границы.
вот здесь граница - резкая
https://codyhouse.co/demo/page-scrol...cts/fixed.html
а вот здесь плавно
https://codepen.io/carpenumidium/pen/LeOjKM

Я понимаю, что в обоих случаях используется разный механизм, в первом случае Jquery, а во втором чистый CSS.
Но как говорится важен результат, а не способ достижения.

И еще....
Необходимое условие - чтобы фиксированная позиция карандашного эскиза точь в точь соответствовала фиксированной позиции самой картинки, чтобы был эффект перетекания карандашного эскиза в картинку...

Подскажите или дайте направление, как сделать задуманное?