CSS using filter & z-index properties together

Question

I Have a problem with css filter. I have an <img> element that is for my posts background image, this is css code for that element:

.post-background
{
 height: 190px;
 margin-bottom: -190px;
 object-fit: cover;
 object-position: 0 -90px;
 width: 100%;
 z-index: -1;
}

Now, I want to make that image darker with filter: brightness(50%); but when I set this property, my post content (called .post-front) disappears from the page.

Answer 1

You have to hover .post-background image when you hover post-item just add following class and modify .post-front

.post-item:hover .post-background {
  filter: brightness(50%);
}

.post-front {
    position: absolute;
    width: 100%;
    display: grid;
    grid-template-columns: 190px 1fr 100px;
}

remove following changes:

.post-background:hover {
    filter: brightness(50%);
}