show marker in certain pictures in portfolio grid

Thank you.
I am a bit stumped. I thought it is a quite easy fix, but I run into problems.

My idea is to first figure out how to get anything shown on top of the image. Lets say ‘Test’ and then when that works make it so that it only displays when the portfolio item has a certain attribute. But I am already struggling to get “test” to show up.

Here is the code I found to change:

$image = get_the_post_thumbnail( $the_id, $image_size, $image_attrs );
                    if( ! empty( $image ) )
                    {
                        $output .= '<div class="av_table_col portfolio-grid-image">';
                        $output .= "<{$link_markup[0]} data-rel='grid-" . avia_post_grid::$grid . "' class='grid-image avia-hover-fx'>{$custom_overlay} {$image}</{$link_markup[1]}>";
                        $output .= '</div>';
                    }
                    $output .= '<footer class="entry-footer"></footer>';
                    $output .= '</article>';
                    $output .= '</div>';

And here is the code I change it to:

$image = get_the_post_thumbnail($the_id, $image_size, $image_attrs);
if (!empty($image)) {
    $output .= '<div class="av_table_col portfolio-grid-image">';
    $output .= "<{$link_markup[0]} data-rel='grid-" . avia_post_grid::$grid . "' class='grid-image avia-hover-fx'>";
    $output .= "{$custom_overlay} {$image}";
    $output .= "<div class='overlay-text'>test</div>"; // Add this line for the overlay
    $output .= "</{$link_markup[1]}>";
    $output .= '</div>';
}
$output .= '<footer class="entry-footer"></footer>';
$output .= '</article>';
$output .= '</div>';

I also added the following passage to my style.css

.grid-image {
    position: relative; 
    display: inline-block;
}

.grid-image img {
    display: block; 
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    bottom: 10px;
    left: 10px; 
    background-color: rgba(255, 255, 255, 0.7); 
    color: #dada21; 
    padding: 5px 10px; 
    border-radius: 5px; 
    font-size: 16px; 
    font-weight: bold; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Unfortunately I dont get the text to show up.
Where is my mistake?

Sounds easy enough!
I added a portfolio category ‘Gast’ and added the following function to ad a custom class to the categorized portfolios, but I cant seem to get the banner to show up.

I added this to functions.php of the child theme:

function add_custom_category_class($classes) {
    if (is_category('378')) {
        $classes[] = 'category-378';
    }
    return $classes;
}
add_filter('body_class', 'add_custom_category_class');

and this to my css:

.category-378 .grid-entry .inner-entry {
  position: relative;
}

.category-378 .grid-entry .inner-entry::before {
  content: 'Gast';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

height: 50px;
background-color: rgba(255, 0, 0, 0.8);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
transform: rotate(-45deg);
transform-origin: top left;
z-index: 1;
}

I managed to add a border around the whole entry, but I cant get a label to show up on the image.

Finally success!

.gast_sort {
    position: relative; 
}

.gast_sort .grid-image {
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
}

.gast_sort .grid-image::before {
    content: 'Gast'; /
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(218, 218, 33, 0.5); 
    color: #ffffff; 
    padding: 5px 10px; 
    box-sizing: border-box;
    font-weight: bold;
    font-size: 24px; 
    z-index: 10; 
    text-align: center; 
}