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>
New contributor
MetalZS is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3