Overlay на картинку, чтобы он не перекрывал текст

Question

Господа, добавил код, при запуске которого можно заметить, что есть overlay, НО, он перекрывает текст. Как сделать так, чтобы оверлей перекрывал только! картинку, и был под текстом (он меняет цвет текста, если текст ссылка - невозможно нажать и тд). Какие есть варианты?

.right-column {
        margin-top: 20px;
        display: flex;
        background-size: cover;
    background-position: center;
    }   
  .top-content{
    height: 270px;
    background-image: url('https://img2.akspic.ru/previews/9/0/9/8/6/168909/168909-ballonchik-graffiti-ulichnoe_iskusstvo-svet-purpur-500x.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
    
}
.top-content::before{
    content: '';
        position: absolute;
        background-color: rgba(33, 33, 33, 0.4);
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;

}

<div class="right-column">
                    <div class="top-content" >
                        <div class="text-top-content">
<h3>26</h3>
<h3>02.12.2015</h3>
<h4>КАК СФОТОГРАФИРОВАТЬ СЕБЯ НА ТЕЛЕФОН ВМЕСТЕ С ЗЕРКАЛКОЙ?</h4>
                        </div>
                    </div>
                    <div class="bottom-content"></div>
                </div>

Answer 1

Используйте Ваш оверлей как background подложку для текста и растяните этот текст на всю картинку, тогда картинка bakground родительского элемента будет затемняться подложкой дочернего, а содержимое дочернего не будет перекрываться:

.text-top-content{
        background-color: rgba(33, 33, 33, 0.4);
        height: 100%;
        width: 100%;
}

Answer 2

Пример

.right-column {
  margin-top: 20px;
  display: flex;
  background-size: cover;
  background-position: center;
}

.top-content {
  height: 270px;
  background-image: url('https://img2.akspic.ru/previews/9/0/9/8/6/168909/168909-ballonchik-graffiti-ulichnoe_iskusstvo-svet-purpur-500x.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
}

.top-content::before {
  content: '';
  position: absolute;
  background-color: rgba(33, 33, 33, .4);
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
}

.text-top-content {
  position: relative;
  z-index: 1;
}

<div class="right-column">
  <div class="top-content">
    <div class="text-top-content">
      <h3>26</h3>
      <h3>02.12.2015</h3>
      <h4>КАК СФОТОГРАФИРОВАТЬ СЕБЯ НА ТЕЛЕФОН ВМЕСТЕ С ЗЕРКАЛКОЙ?</h4>
    </div>
  </div>
  <div class="bottom-content"></div>
</div>

Answer 3

.row {
    display: flex;
    margin-top: 20px;
}

.left-column {
    width: 60%;
    padding: 0;
padding-right: 5px;
}

.left-top-side {

    background-image: url('https://img2.akspic.ru/previews/9/0/9/8/6/168909/168909-ballonchik-graffiti-ulichnoe_iskusstvo-svet-purpur-500x.jpg');
    background-size: cover;
    background-position: center;
    height: 360px;

}

.nOverlay {}

.left-bottom-side {}

.right-column {
    width: 40%;
    padding: 0;

}

.right-top-side {
    position: relative;

    .right-top-content {
        position: absolute;
        bottom: 0;
        color: #fff;

        a {
            color: #fff;
        }
    }

    .nOverlay {
        height: 240px;
        background-size: cover;
        background-position: center;
        position: relative;
        display: block;

        &::before {
            content: '';
            width: 94.5%;
            background-color: $dark;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            opacity: 50%;
            transition: opacity .25s ease;
            
        }


    }
    margin-bottom: 5px;
}

.right-bottom-side {


    .right-bottom-content {
        position: absolute;
        bottom: 0;
        color: #fff;
        z-index: 0;

        a {
            color: #fff;
        }
    }
    .nOverlay {
        height: 240px;
        background-size: cover;
        background-position: center;
        position: relative;
        display: block;

        &::before {
            content: '';
            width: 94.5%;

            background-color: $dark;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            opacity: 50%;
            transition: opacity .25s ease;
            
        }


    }
    
}



.nOverlay:hover {
    &::before {
        opacity: 75%;
    }
}

<div class="row">
                <div class="left-column">
                    <div class="left-top-side">
                        <div class="nOverlay" ></div>
                    </div>
                    <div class="left-bottom-side">
                        <h3>26</h3>
                        <h3>20.12.2022</h3>
                        <h2>Сегодня наш гость расскажет о том, что ждёт новоиспечённых обладателей квадрокоптера</h2>
                    </div>
                </div>
                <div class="right-column">

                    <div class="right-top-side">

                        <div class="nPattern">
                            <div class="nOverlay" style="background: url(https://img2.akspic.ru/previews/9/0/9/8/6/168909/168909-ballonchik-graffiti-ulichnoe_iskusstvo-svet-purpur-500x.jpg) no-repeat">
                                <div class="right-top-content">
                                    
                                    
                                    <h3>26</h3>
                                    <h3>20.12.2022</h3>
                                </div></div>
                        </div>
                    </div>
                    <div class="right-bottom-side">

                        <div class="nPattern">
                            <div class="nOverlay" style="background: url(https://img2.akspic.ru/previews/9/0/9/8/6/168909/168909-ballonchik-graffiti-ulichnoe_iskusstvo-svet-purpur-500x.jpg) no-repeat">
                                <div class="right-bottom-content">
                                    
                                    <h2>Сегодня наш гость расскажет о том, что ждёт новоиспечённых обладателей квадрокоптера</h2>
                                    <h3>26</h3>
                                    <h3>20.12.2022</h3>
                                </div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Не очень хорошо видно, НО, опасити работает, ховер работает (но не тут) и текст не перекрывается

БЛОГ НА HUSL

Overlay на картинку, чтобы он не перекрывал текст

Ответы (3 шт):