Писать код очень лень, напишу примерно возможные варианты:
1) Использование css blend-modes. Но мне кажется что с неоднородной картинкой не прокатит такое.
2) Дублировать этот заголовок, поменять его цвет, поместить его внутрь скошенного контейнера, повернуть его в обратную сторону с помощью skew (вы ведь скошенный контейнер через skew будете делать) и с помощью translateY все это дело двигать (аля контейнер двигается вверх, а заголовок вниз). В виде описания возможно выглядит сложно, но как только вы накидаете какой-нибудь кривой пример, станет куда проще.
Вот например 2 демки с похожим эффектом маски (только без скошенных углов, но это по сути дела 1 свойство добавить):
codepen.io/suez/pen/XJGOyL - здесь текст в пунктах меню "перекрашивается" в белый, хотя на самом деле внутри перемещающегося блока просто расположен дубликат списка, который движется в обратную сторону, во время движения самого блока.
codepen.io/suez/pen/kqlIJ - моя самая первая демка на эту тему, код там скорее всего жутковатый, но зато можно легко понять как работает этот mask эффект через F12.
