0

I have a super simple page consisting of a background and a logo in the middle. I want to change the filter of the background image when I hover over the logo in the middle. How can I achieve that? I tried using + > ~ operators but couldn't manage to make it work. Here's my CSS

    .showcase::after {
    content:'';
    height: 100vh;
    width: 100%;
    background-image: url(resim.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    transition: all 1s;
    filter: saturate(140%);
}


.logo {
    position: absolute;
    z-index: 1;
    width: 100px;
    transition: all 1s;
    filter: opacity(0%);
    cursor: pointer;
}

.logo:hover + .showcase::after {
filter: saturate(0%);
}

and here's my HTML

<body>
    <header class="showcase">
        <img src="logo.png" class="logo" alt="">
    </header>
</body>
</html>
Emre Apaydın
  • 1

0 Answers0