Image filter affects parent element-CodePudding

In a gallery, I want to mark some users as "gone" by applying a red cross over the thumbnail. This code works fine:

<style>
    div.former {
        position: relative;
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #f00;
    }

    div.former::before,
    div.former::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 15px; /* cross thickness */
        background-color: red;
        opacity: 0.8;
    }

    div.former::before {
        transform: rotate(45deg);
    }

    div.former::after {
        transform: rotate(-45deg);
    }

   
</style>
<div >
    <img src="adam.jpg">
</div>

But when I apply a filter to the image

then one of the bars disappears

div.former img {
    filter: grayscale(0.9);
}

Tested it with Firefox & Chrome, both showed this behaviour. I tried with setting the height of the container also, but that had no effect. So how can I make the bar visible?

CodePudding user response：

You just need to add an z-index for the before and after elements since it is appearing behind the image.

div.former::before,
div.former::after {
    z-index: 1;
}