Transitions & Hovers are overlapping/overriding eachother, how to fix?

Question

I'm making a soundboard for and I've stumbled upon a problem. I was styling the buttons and here's how it has to look... When you hover over the button the planet should:

• Rotate around it's axis (that works)
• Saturate the planet texture (that works)
• Fade out the top number image and rotate the opposite way of the planet (that works)
• Fade in the bottom number image and also rotate the opposite way of the planet (that doesn't work at all)

Here are 3 picture of the website:

1

2

3

Here is the CSS (button = planet, number = top number image, number-under = bottom number image):

    .button {
        position: absolute;
        width: calc(80% - 8px);
        height: calc(80% - 8px);
        background: white;
        border-radius: 200px;
        top: 10%;
        left: 10%;
        text-align: center;
        border: 4px solid white;
        box-shadow:0px 0px 15px 8px black;
        transition: transform 300s, filter 2s;
        transform: rotate(0deg);
    }

    .button:hover {
        transform: rotate(6200deg); 
        filter: saturate(600%);
    }

    .number {
        transition: transform 300s, opacity 2s;
        transform: rotate(0deg);
        opacity: 1;
        position: absolute;
        z-index: 2;
        left: 0;
    }

    .number:hover {
        transform: rotate(-6200deg);
        opacity: 0;
    }

    .number-under {
        position: relative; 
        left: 0; 
        z-index:1;
        opacity: 0;
        transform: rotate(0deg);
        transition: transform 300s;
    }

    .number-under:hover {
        opacity: 1;
        transform: rotate(-6200deg);
    }

And here is the HTML (it's not showing up in my demo text so I hope it will when I post this. I will add a image just to be sure):

HTML Code Image

Answer 1

I found the solution, I changed some CSS:

    .number-under {
        position: absolute; 
        left: 0; 
        z-index: 1;
        opacity: 0;
        transform: rotate(0deg);
        transition: transform 300s, opacity 2s;
    }

    .number:hover ~ .number-under {
        opacity: 1;
        transform: rotate(-6200deg);
    }