Cell background filter without filtering cell content

Question

I have an HTML table in which each cell will have a unique background.

I would like to darken the background image on hover without darkening the words inside the cell. How can I do this?

Here is my current code as it stands:

html{
    color: white;
    font-size: 200%;
}

th{
    width: 500px;
    height: 300px;
    background-image: url(https://images.pexels.com/photos/1054655/pexels-photo-1054655.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-position: center;
    background-size: 100%;
    transition: 1s;
}

th:hover{
    filter: brightness(50%);
    background-size: 125%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <table>
        <tr>
            <th>
                <h1>Elephant</h1>
            </th>
        </tr>
    </table>
</body>

</html>

Everything works as intended EXCEPT the word "elephant" also darkens... How can I fix this?

score 1 · Accepted Answer · answered Jan 19 '21 at 23:46

You can use a box-shadow inside , it will be layed over the background.

example:

html{
    color: white;
    font-size: 200%;
}

th{
    width: 500px;
    height: 300px;
    background-image: url(https://images.pexels.com/photos/1054655/pexels-photo-1054655.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-position: center;
    background-size: 100%;
    transition: 1s;
    box-shadow:inset 0 0 0 50vw rgba(0,0,0,0);
}

th:hover{
    box-shadow:inset 0 0 0 50vw rgba(0,0,0,0.5);
    background-size: 125%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <table>
        <tr>
            <th>
                <h1>Elephant</h1>
            </th>
        </tr>
    </table>
</body>

</html>

Cell background filter without filtering cell content

1 Answers1

Linked