специфика работы браузеров, код считывается слева направо и сверху вниз
по той же самой причине нет селекторов родителей
вот на скорую руку нашел статью
можешь еще погуглить на эту тему
создай див, спозиционируй его абсолютно, чтобы он был поверх картинки и далее задай ему background linear-gradient с нужным градиентом (от полупрозрачного черного снизу переливай к прозрачному сверху)
