How to remove transparency (opacity) for a nested div?

Question

css

The code is this:

<div class="dokuro-black-box">
            <div class="dokuro-full-popular-image uk-vertical-align" style="background-image: url('images/popular.png');">

                <div class="info uk-vertical-align-bottom">
                    <h2>Название видео</h2>
                    <h5>краткое описание видео, примерно строк этак в 3 или больше, но 3 строки смотрятся хорошо.</h5>

                    <a href="/">Просмотреть</a>
                </div>
            </div>
        </div>

Problem:
In general, I display a picture, but since I need to put text on top of the picture, it was decided to make it as a block background. The text is superimposed well, but if the picture is too bright, then the white letters are hard to see, so I decided to darken it. I put all this into the "dokuro-black-box" div, which I betrayed with a black background. For the block with the background set opacity: 0.7;
Everything is fine, but the text is also darkened. How to make the text not become dark?
Or advise as it is more rational to solve my problem.
// Tried setting the "info" div to opacity: 1; or just for h2, h5 and links - doesn't want to.

Answer 1

You don't need to shade the image. Give the text a shadow - text-shadow: 0 0 5px rgba(0,0,0,.5);
Play around with the settings.