Transparent image has background

logo.png is a transparent image. But when the web browser loads the web page, it has an invisible square around it. I only want the image to change when I am actually hovering over it, like on the apple website. I am sorry if the HTML is formatted weird here, I am not familiar with stackoverflow's system.

.header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f1f1f1;
        padding: 20px 10px;
      }

      .header a {
        color: black;
        text-align: center;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        line-height: 25px;
        border-radius: 4px;
      }

      .header a.logo {
        display: flex;
        align-items: center;
        text-decoration: none;
      }

      .header a.logo img {
        width: 25%;
        height: 25%;
        transition: filter 0.3s ease-in-out;
      }

      .header a.logo:hover img {
        filter: brightness(1.2);
      }

      @media screen and (max-width: 500px) {
        .header {
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
        }

<!DOCTYPE html>
<html>
<body>
<div class="header">
<a href="#home" class="logo">
<img src="https://i.sstatic.net/iAHg5.png" alt="SYMBL logo" onclick="show('home', 'contact')">
</a>
</body>
</html>

Solution

You are adding hover action to the red box which belongs to the link element. Instead add it to black box which belongs to img element

Instead, give class to your image, say img_link and apply css to it:

.img_link:hover {
    filter: brightness(1.2);
  }