Question 43817 in Html Question posted in
Some basic documentation can be found here.

Transparent image has background – Html

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.stack.imgur.com/iAHg5.png" alt="SYMBL logo" onclick="show('home', 'contact')">
</a>
</body>
</html>
Tags:

3

Answers


  1. 0

    Not sure why you added background-color: #f1f1f1; to header if you need transparent background with only image which change on hover.

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
       
        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.stack.imgur.com/iAHg5.png" alt="SYMBL logo" onclick="show('home', 'contact')">
</a>
</body>
</html>
    Login or Signup to reply.
  2. 0

    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);
  }
    Login or Signup to reply.
  3. 0 
    .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.stack.imgur.com/iAHg5.png" alt="SYMBL logo" onclick="show('home', 'contact')">
</a>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search