Text on the background div box is not showing

Question

I want to make this effect:

Here, you can see:

On the image there is a box with multiple text:

Now, I have this HTML & CSS:

<article class="home-top-post post-59 post type-post status-publish format-standard has-post-thumbnail hentry category-discover" id="post-59">
    <div class="post-thumbnail">
        <a href="#">
            <img width="746" height="620" src="">
        </a>
    </div>
    <header class="entry-header">
        <div class="post-category">
            <a href="http://washington-parent.test/category/discover/">
                Discover                    
            </a>
        </div>
        <h2 class="entry-title">
            <a href="#" rel="bookmark">Est quidem delectus odio</a>
        </h2>               
        <div class="entry-meta">
            <span class="posted-on">Posted on <a href="" rel="bookmark"><time class="entry-date published updated" datetime="2020-04-15T23:30:29+00:00">April 15, 2020</time></a></span> <span class="byline"> by<span class="author vcard"><a class="url fn n" href="">admin</a></span></span>
        </div>        
    </header>
</article>


article.home-top-post .entry-header {
    position: absolute;
    bottom: 40px;
    left: 15px;
    z-index: 999;
    width: calc(100% - 34px);
    padding: 25px;
    color: #fff;
    background: #4c85c4 0 0 no-repeat padding-box;
    mix-blend-mode: multiply;
}

Now, it's showing like this image:

How can I show that text as white color like the top image?