• HTML
• CSS

HTML

<!--
    Si lograste ejecutar y analizar el funcionamiento del código del elemento anterior de ésta versión,
    no tendrás problemas para entenderlo , en caso contrario se recomienda verlo
-->

<!--
    En esta versión utilizamos el mismo principio de la versión anterior solo con unas variantes.
    En este caso la clase 'item' vendría a ser la clase 'container' de la versión anterior
    ,la clase 'icons' como 'imgs' y las imágenes las reemplazamos por íconos
-->

<div class="social-container">
    <a href="#" class="item">
        <div class="icons color-1">
            <i class="icon-facebook-1"></i>
            <i class="icon-facebook-1"></i>
        </div>
    </a>
    <a href="#" class="item">
        <div class="icons color-2">
            <i class="icon-twitter-7"></i>
            <i class="icon-twitter-7"></i>
        </div>
    </a>
    <a href="#" class="item">
        <div class="icons color-3">
            <i class="icon-google"></i>
            <i class="icon-google"></i>
        </div>
    </a>
    <a href="#" class="item">
        <div class="icons color-4">
            <i class="icon-linkedin"></i>
            <i class="icon-linkedin"></i>
        </div>
    </a>
    <a href="#" class="item">
        <div class="icons color-5">
            <i class="icon-youtube-play"></i>
            <i class="icon-youtube-play"></i>
        </div>
    </a>
</div>

CSS

.social-container{
    position:fixed;
    top:20%;
    right:0;
    
}
.item{
    width:50px;
    height:50px;
    margin:2px 0px;
    display:block;
    overflow:hidden;
    border-radius:5px 0px 0px 5px;
}
.icons{
    transition:0.4s all;  
}
.icons i{
    color:#fff;
    font-size:25px;
    padding:12px 5px 10px 5px;
    display:block;
}

.item:hover .icons{
    margin-top:-50px;
}

/* colores */

.color-1{
    background:#3b5998;
}
.color-2{
    background:#00abf0;
}
.color-3{
    background:#d95232;
}
.color-4{
    background:#0073b1;
}
.color-5{
    background:#e83028;
}