why aren'tmy hover images are not aligning in HTML

I have two images for each button on my site, one that is the base version of the button, and one for when you hover over the button.

the hover image for my 'blog' button is showing up on top of the button above it. (imaged below, i made but button 50% transparent so you could see the issue) (https://i.sstatic.net/Hn98U1Oy.png)

(i know this code is not very good, I only started learning 4 days ago and am just making this test site for now)

I have tried following some different tutorials online but I have gotten stuck on how to fix this issue.

.buttonlinks {
    width: 300px;
    height: 30px;
    position: relative;
}

.buttonlinks img{
    width: 100%;
    height: 100%;
}

.aboutmehover {
    position: absolute;
    left:0;
    top:0;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.aboutmehover:hover {
    opacity:1;
}

.bloghover {
        position:absolute;
    top:0;
    left:0;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.bloghover:hover {
    opacity:1;
}

.interestshover {
            position: absolute;
    left:0;
    top:15;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.interestshover:hover {
       opacity:1; 
}

<!doctype html>
<html lang="en">
    <head>
    </head>
    <body>

            <!-- Left Section -->
            <div class="column left" style="background-color: rgba(125, 77, 77, 0)">
                <div class="buttonlinks">
                    <!-- LEFT SIDE BUTTON LINKS -->
                    <a href="otherpages/about-me.html"><img src="buttons/about-me.png" alt="About Me Button"/></a>
                    <a href="otherpages/about-me.html"
                        ><img class="aboutmehover" src="buttons/about-me-hover.png" alt="About Me Button"/></a>
                    <a href="otherpages/blog.html"><img src="buttons/blog.png" alt="About Me Button" /></a>
                    <a href="otherpages/blog.html"><img class="bloghover" src="buttons/blog-hover.png" /></a>
                    <a href="buttons/interests.png"><img src="buttons/interests.png"></a> 
                    <img class="interestshover" src="buttons/interests-hover.png">
                    
                </div>
            </div>
            <div class="column null" style="background-color: rgba(125, 77, 77, 0)">
                <p></p>
            </div>

    </body>
</html>

Solution

Like I said in my previous comment there is no need for you to keep two a href and switch between them, so here is one example based on your code that uses one a href tag that switches pictures based on if a user hovers it or not.

.buttonlinks {
    width: 300px;
    height: 30px;
    position: relative;
}

.buttonlinks img{
    width: 100%;
    height: 100%;
}

#about-me{
  display:block;
  background-image: url('https://placehold.co/100x50?text=About-Me');
  height: 50px;
   width: 100px;
}

#about-me:hover{
  background-image: url('https://placehold.co/100x50?text=About-Me-Hover');
}

#blog{
  display:block;
  background-image: url('https://placehold.co/100x50?text=Blog');
  height: 50px;
   width: 100px;
}

#blog:hover{
  background-image: url('https://placehold.co/100x50?text=Blog-Hover');
}

#interests{
  display:block;
  background-image: url('https://placehold.co/100x50?text=Interests-Me');
  height: 50px;
   width: 100px;
}

#interests:hover{
  background-image: url('https://placehold.co/100x50?text=Interests-Hover');
}

<html lang="en">
    <head>
    </head>
    <body>
      <div class="column left" style="background-color: rgba(125, 77, 77, 0)">
        <div class="buttonlinks">
          <a href="otherpages/about-me.html" id="about-me"></a>
          <a href="otherpages/blog.html" id="blog"></a>
          <a href="buttons/interests.html" id="interests"></a> 
        </div>
      </div>
      <div class="column null" style="background-color: rgba(125, 77, 77, 0)">
        <p></p>
      </div>
    </body>
</html>