Buttons losing functionality when positioned over background image - html

Question

I am having the weirdest problem: I am working on a portfolio page with images that should link to the various projects. There are 6 of these in total. Each of the images has a button that should live on top of it. When the button is hovered on by the user, it changes color, the cursor changes, and a popup with a short description of the project opens. When the button is clicked, there is an event listener that redirects to the project's page.
The problem is that in 2 out of the 6 instances, the moment I position the buttons inside the image, the buttons lose all functionality (including the event listener). As far as I can tell the code governing these 2 instances is the same as the other 4 where there is no such problem.
code where it doesn't work:
HTML:
<div class="container" id="linkTwo">
<img src="assets/images/bonez2.jpg" alt="bonez" style="width:200px; height:200px;" class="linkpic" >
<div class="btn1"id="btn1">Bone's Beatz<span id="bonezPop"> */some text that pops up/* </span></div>
</div>
CSS:
#linkTwo {
position: absolute;
top: 100px;
left: 230px;
}
#linkTwo #btn1:hover {
background-color: black;
}
#btn1 {
position: absolute;
left:20px;
padding-left: 23px;
padding-right: 23px;
}
#btn1 #bonezPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn1:hover #bonezPop {
visibility: visible;
}
.container #btn1 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 53px;
padding-right: 53px;
border: none;
cursor: pointer;
border-radius: 5px;
}
code that DOES work:
HTML:
<div class="container" id="linkFive">
<img src="assets/images/weather.jpg" alt="weather app" style="width:200px;height:200px;" class="linkpic">
<div class="btn3" id="btn3">Weather App<span id="weatherPop"> */some text that pops up */</span></div>
</div>
CSS:
#linkFive {
position: absolute;
top:320px;
}
#btn3 #weatherPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn3:hover #weatherPop {
visibility: visible;
}
#btn3 {
padding-left: 53px;
padding-right: 53px;
}
.container .btn3 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
padding-right: 40px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn3:hover {
background-color: black;
}
I realize this whole thing would have been done much more easily with WordPress or some such, but this is a class assignment that requires I do this with code.
Thanks!
Short gif of how the problem looks

Answer 1

Found the answer. It was a different CSS rule that was for some reason breaking it:
.container {
position: relative;
width: 50%;
}
commenting this out solved the problem.