HTML text disappers when I move the cursor on it

Problem: Yesterday everything worked fine. Today I've opened my project and I've seen the next picture:

It's when I didn't have height: 100% in .random-category-img class.

Yesterday, when I set height: 100% I would cover a black background by picture. However, now I see such a picture: When my cursor is anywhere, text disappear(it moves to the place where the red arrow is, but if I move cursor on pictures, this text will move from red arrow to black arrow. I don't know what happened and don't know how to fix it.

HTML template:

    <div class="random-categories-container">
        <div class="random-categories-loop">
            {% for category in random4Categories %}
            <a class="random-category" href="{% url 'bookByCategorySlug' category.slug %}">
                <img class="random-category-img" src="{{category.image.url}}" alt="">
                <div class="random-category-title">{{ category }}</div>
            </a>
            {% endfor %}
        </div>
        <a class="allEditionsButton" href="{% url 'listOfCategories' %}">Усі категорії</a>
    </div>

Css file

.random-category, .random-categories-container,
.random-categories-loop {
    display: grid;
    z-index: 1;
}

.random-categories-container {
    padding: 20px 0 0;
    grid-template-rows: 2fr 1fr;
}

.random-categories-loop {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    z-index: 1;
}

.random-category {
    font-size: 24px;
    align-items: center;
    background: black;
    border-radius: 20px;
    transition: 0.3s ease-in-out;
}

.random-category-img {
    width: 100%;
    /* height: 100%; */
    opacity: 0.6;
    border-radius: 20px;
}

.random-category:hover {
    transform: scale(1.05);
}

.random-category-title {
    display: flex;
    justify-self: center;
    position: absolute;
}

What do I want to have: I have a picture, black background and text. I use black background to reduce the opacity of the picture. My text have to be on the picture and don't disappear. So I use height: 100% and my picture covers all black background, however the text disappers.