Ivan Bogachev

1. Расположить элементы так, как на картинке, проще всего заданием width, float и clear для них. И это логично, флоаты как раз предназначены для всевозможных обтеканий.
2. Чтобы отступы между картинкой и текстом не скакали, была ровная сеточка, а строки в разных блоках совпадали по вертикали, имеет смысл жестко привязать ее (картинки) высоту к EM/REM. Вообще удобно все к этим единицам привязывать, но это уже другая история.
3. Исходя из пункта 2, нужно добавить media-выражения для картинки на разные размеры экрана. Да, это лишняя работа. Да, это не чик-чик и в продакшен, но если важны мелочи в дизайне - делаем.
4. На маленьких экранах все это будет плохо восприниматься, так что выстраиваем элементы в столбик. Ширина в 100% всему. По уму контент важнее, чем aside, так что меняем их порядок с помощью свойств flex, flex-direction и order.

Получится что-то такое:

В теории:

В процессе работы анимации со свойством background-position постоянно происходит полный цикл всего, что только может происходить при отображении страницы:



Иными словами нагрузка есть, да.

На практике:

На среднем железе один такой цикл занимает меньше 1ms. Это не много. Это не то, что будет создавать "ощущение тормозов" у пользователя. Если поделить 1000ms на 60fps, то получится где-то ~16.5ms на кадр. Соответственно, если бы анимация занимала к примеру 30ms, то мы бы глазами видели лаг. Если анимация занимает ~10-12ms, то у устройства еще остаются ресурсы на работу остальных скриптов, общение с сервером и.т.д. и мы видим шустро работающую страницу. А в вашем случае она занимает меньше 1ms, так что нет каких-то весомых причин отказываться от нее. Не занимайтесь преждевременной оптимизацией.

span {
    background: linear-gradient(to bottom,
        transparent 0%,
        transparent 50%,
        #ff0 50%,
        #ff0 100%);
}

.category-desc {
    position: relative;
}

.page-header.item-title {
    position: absolute;
    bottom: 60px;
    left: 10px;
}

Если нужно именно такой частичный переход сделать, да еще и кроссбраузерно, то можно отталкиваться от следующего подхода:

• Есть несколько секций с overflow: hidden
  
• Иконки дублируются в каждой секции, но с разными цветами
  
• В процессе скролла двигаем иконки, чтобы они оказывались на одном и том же месте относительно экрана
  

Прототип для изучения:

Вариант сделать это на position: fixed - не вариант, т.к. в сочетании с overflow: hidden может происходить неведомая магия.

Забудьте... дизайнер просто демон... посылайте нафиг дизайнера...

О да, люблю эти комментарии. Набросал тут небольшой прототип:


В браузерах особо не проверял, только Chrome и FF, но вроде в современных должно работать.

Значение height: auto для картинок добавляет вот этот скрипт (смотрите в функции response_layout).