Проблема с позиционированием наложения поверх Text-Image-Section. ⇐ CSS

[Anonymous]

У меня проблема с размещением наложения поверх Text-Image-Section. Я попытался визуализировать ожидаемый результат на прикрепленном изображении. Наложение (синее) должно располагаться сверху, не перекрывая текст. Все тексты (в Text-Image-Section и в оверлее) динамические (по длине).
Предпочтительно, я бы решил это без использования JS, но не могу придумать любое возможное решение.
Используется стек PHP, HTML, CSS (SCSS), JS (jQuery) и Bootstrap (v5).
Ожидаемый результат
Я пытался позиционировать наложение с помощью позиции абсолютный и с преобразованием, но в обоих случаях я не могу гарантировать, что текст не будет накладываться.
Это мой HTML на данный момент:










Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis maiores modi quae quos. Beatae consectetur, dicta harum minima modi perferendis similique soluta tenetur voluptate voluptatum. Ad aperiam architecto beatae commodi dicta est harum numquam quod recusandae suscipit! Aliquam atque delectus dicta eum fugiat id in natus omnis, provident quia reiciendis reprehenderit tempore ut? Accusantium alias aliquid amet blanditiis commodi consectetur consequatur cumque delectus distinctio, doloremque eaque et, excepturi hic illo incidunt ipsa ipsam libero magni maxime minima minus nemo nesciunt nulla numquam obcaecati officiis perferendis porro quibusdam quos repellendus reprehenderit rerum sit suscipit ullam vel voluptas voluptatem. Dolores.




Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum eos laborum non saepe velit.






Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis maiores modi quae quos. Beatae consectetur, dicta harum minima modi perferendis similique soluta tenetur voluptate voluptatum. Ad aperiam architecto beatae commodi dicta est harum numquam quod recusandae suscipit! Aliquam atque delectus dicta eum fugiat id in natus omnis, provident quia reiciendis reprehenderit tempore ut? Accusantium alias aliquid amet blanditiis commodi consectetur consequatur cumque delectus distinctio, doloremque eaque et, excepturi hic illo incidunt ipsa ipsam libero magni maxime minima minus nemo nesciunt nulla numquam obcaecati officiis perferendis porro quibusdam quos repellendus reprehenderit rerum sit suscipit ullam vel voluptas voluptatem. Dolores.












Подробнее здесь: https://stackoverflow.com/questions/791 ... ge-section