Спрятать текст за прозрачным блоком
 

Здравствуйте! Это глупый вопрос, и скорее всего решение нет. Но хочу спросить все же.

Как спрятать текст за прозрачным блоком, при этом все остальное должно остаться видимым?

Небольшое демо тут:
https://codepen.io/ethereal94/pen/ExgKrbO

P.S Прозрачный блок должен иметь position: absolute

Спасибо!

Не совсем понятно о чем и зачем?
Что бы под "прозрачным" блоком был виден фон, но не виден текст?
А что дальше? Этот блок так и будет стоять на этом месте или с ним будут происходить какие то манипуляции? От этого зависит возможное решение.

<style>
.box {
  position: relative;
  width: 300px;
  height: 200px;
  color: white;
  background-image: url("https://png.pngtree.com/thumb_back/fw800/back_our/20190628/ourmid/pngtree-purple-polygonal-background-image_280905.jpg");
}
.box-transparent {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50%;
  height: 100%;
  border: 5px solid coral;
  background-image: url("https://png.pngtree.com/thumb_back/fw800/back_our/20190628/ourmid/pngtree-purple-polygonal-background-image_280905.jpg");
  background-position:left -150px;
};
</style>
<div class="box">
  <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
  <div class="box-transparent"></div>
</div>