* {
    margin: 0;
}
.icons-container{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
a{
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 1.7rem;
    color:#fff;
    transition: .4s;
}
.social-span{
    position: absolute;
    top:0;
    display: block;
    width: 100px;
    height: 100px;
    background: red;
    z-index: -1;
    transition: .4s;
}
a:nth-child(1),a:nth-child(1) .social-span{
    background: #121212;
}
a:nth-child(2),a:nth-child(2) .social-span{
    background: #0077b5;
}
a:nth-child(3),a:nth-child(3) .social-span{
    background: #3b5998;
}
a:nth-child(4),a:nth-child(4) .social-span{
    background: #dd2a7b;
}
a:nth-child(5),a:nth-child(5) .social-span{
    background: #00acee;
}
a:hover .social-span{
    transform: scale(1.1);
    opacity: .5;
}
a:hover .social-span:nth-child(2){
    transform: scale(1.2);
    opacity: .2;
}