Image with hyperlink turning into alt-text with hyperlink

Hello!
I’m trying to turn logo.png into a clickable link, but the code I currently have is turning the image into a text hyperlink using the alt value. What’s going on here? I read that the z-value may mess with image hyperlinks in some cases, but I don’t think that the image turned into the alt-text those cases.

HTML:

     <div class="header" class="titleText">
       <div id="logoHeaderRight">
         <a href="#">
            <img src="Logo.png" alt="The logo" id="logoSymbol">
         </a>
       </div>
     </div> 

CSS:

.header {
  padding: 1px;
  background: #6882ff;
  height: 70px;
  width: 100%;
  margin-top: 0px;
  position: relative;
  z-index: 0;
}

.titleText {
  color: white;
  font-size: 13px;
  font-family: 'Patrick Hand', cursive;
  text-align: center;
}
#logoHeaderRight {
  background: #2b9dff;
  position: absolute;
  z-index: 1;
  margin-left: 55%;
  width: 5%;
  margin-top: 0px;
  text-align: right;
  padding-right: 1px;
  z-index: 1;
  padding: 1px;
  height: 69px;
  pointer-events: none;
}

#logoSymbol {
  max-height: 70px;
  mix-blend-mode: multiply;
  z-index: 2;
}

Two things:

  1. Did you source the image correctly? src="Logo.png" That’s probably the reason the image is showing up as the alt text.

  2. pointer-events: none; You’ve disabled pointer-events. It’s not going to be clickable.