Wysuwalne paski z ikonami social

Cześć, mam problem otóż chciałem zrobić wysuwane ikonki z mediami społecznymi takie jak na tej stronie, z tym że znajdowały by się one po prawej stronie. Link

Póki co otrzymałem coś takiego ale nie wyświetla się po najechaniu kursorem w sposób prawidłowy:

Kod HTML:

<aside>
        <ul>
            <li>
                <a href="#" class="facebook">
                    <span>Facebook</span>
                    <i class="fab fa-facebook-f text-white"></i>
                </a>
            </li>
            <li>
                <a href="#" class="github">
                    <span>GitHub</span>
                    <i class="fab fa-github text-white"></i>
                </a>
            </li>
            <li>
                <a href="#" class="instagram">
                    <span>Instagram</span>
                    <i class="fab fa-instagram text-white"></i>
                </a>
            </li>
        </ul>
    </aside>

Kod CSS:

aside ul {
    list-style: none;
    position: fixed;
    top: 50%;
    right: 0%;
    overflow: hidden;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 1vw;
}

aside ul li a {
    display: block;
    height: 5vh;
    width: 5vw;
    border-radius: 5vh 0 0 5vh;
    border: 0.12vw solid #000;
    background: #FFF;
    margin-bottom: 1vh;
    transition: all .4s ease;
    color: #2980b9;
    text-decoration: none;
    line-height: 5vh;
    position: relative;
}

aside ul li a:hover {
    cursor: pointer;
    width: 10vw;
    color: #fff;
}

aside ul li a:hover span {
    left: 3vw;
}

aside ul li a span {
    padding: 0 2vw 0 1vh;
    position: absolute;
    right: -20vw;
    transition: left .4s ease;
}

aside ul li a i {
    position: absolute;
    top: 50%;
    left: 1vw;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

aside ul li .facebook {
    background: rgba(39, 174, 96, 0.1);
    border-color: #3B5998;
    color:#3B5998;
}

aside ul li .facebook:hover {
    background: #3B5998;
}

aside ul li .github {
    background: rgba(230, 126, 34, 0.1);
    border-color: #767676;
    color: #767676;
}

aside ul li .github:hover {
    background: #767676;
}

aside ul li .instagram {
    background: rgba(34, 167, 240, 0.1);
    border-color: #bc2a8d;
    color: #bc2a8d;
}

aside ul li .instagram:hover {
    background: #bc2a8d;
}

Z góry dzięki za odpowiedź.

Pokaż tutaj: https://jsfiddle.net/

https://jsfiddle.net/s36ebL75/

Spróbuj zmienić rodzica na pozycję relative a obiekt który ma się wysuwać, na absolute.