Zoom navigating website, not letting hover on background sections work

for more detailed info, I will let all the content of my website here: https://drive.google.com/drive/folders/14s70DIjtTBVbosj67TbRSbZsN4KUJma7?usp=sharing

My website is inspired in this http://2011.beercamp.com/ kind of structure of navigation, the problem is that I can't aply, on the second section (lisboaoriente) and after ones, any image hovers or audio buttons, is like the first sections (muxito), is covering it, so the mouse doesn't feel the back divs.

Example of div not working:

 #img2 {        
    background-image: url(img/caminhoferro.png);
    background-repeat: no-repeat;
    width: 876px;
    height: 650px;
    background-size: cover;
    position: absolute;
    top: -348px;
    left: 188px;
    transform: rotate(-90deg);
 }


#img2:hover {
background-image: url(img/orienteover.png);
    background-repeat: no-repeat;
    background-size: cover;
   width: 755px;
    height: 400px;
    position: absolute;
   top: -288px;
    left: 258px;
}

I tried looking at the java but it doesn't seem to be the problem ..

Solution

First at all would be nice to have a working example of your problem.

Anyway I've take a look on the site you've linked and on the code you've provided in google drive, below some considerations.

1) "I can't aply, on the second section (lisboaoriente) and after ones, any image hovers or audio buttons, is like the first sections (muxito), is covering it":
Because you are covering the other sections with the html element div with id 'muxito'.

#muxito { 
    color: white;
    z-index: 100; 
}
#lisboaoriente { 
    color: white; 
    z-index: 90;
}

As you can this from the code above you're putting z-index on elements and the id 'muxito' has the higher z-index. It's meaning that the element 'muxito' would be over the other elements. You should consider place a lower z-index on 'muxito' to obtain you're result.

As you can see from this example, the 'muxito' is covering your other elements. Instead in this one example 'muxito' is under the 'lisboaoriente' element.

2) The site you've linked is not using 'scale' and 'z-index' css for obtain the result you are trying to achieve. They are using transform: translate3d(0px, 0px, 0px); on the outer div and transform: translate3d( 0, 0, -1000px ); on the inner 'section'elements(all out of the first seems), so consider to use these properties.

Let me know if this help you enough.