Problem with image animation hiding overlay title link

Hello and thank you for this very nice and flexible theme!
I am more of a self-learned hobby developer and ran into an issue that I cannot solve by myself.

Problem/Motivation

I am using the theme developing this site. On the front page I have the image grid (please ignore everything else, still working on it), build using views where I style the overlay titles using CSS. I see that the link style is getting changed, but the image always gets on top of it, making it impossible to see the hovered link. Can you tell me what I am doing wrong/what I need to change to show the titles always on top of the images?

Steps to reproduce

I use this code for the normal view:

.view-kompetenzen .views-field-title a {
    padding: 8px 16px !important;
    font-size: 1.1em;
    color: white;
    background: #D60000;
}

And this for the hover effect:

.view-kompetenzen .views-field-title a:hover {
    padding: 8px 16px !important;
    font-size: 1.1em;
    color: black;
    background: #ccc;
    opacity: 100%;
}

Any help is appreciated!