.container2 {
    display:flex;
}
.container2 .box2 {
    position:relative;
    width: 100%;
    height:100px;
    box-sizing:border-box;
    text-align:center;
    margin:0 10px;
    background:#00171d;
    overflow:hidden;
    border-radius:4px;
    box-shadow:0 0 0 2px rgba(0,7,10,1);
}
.container2 .box2 .icon2 {
    width:100%;
    height:100%;
    background:#00171d;
    transition: 0.5s;
}
.container2 .box2 .icon2 .fa {
    font-size: 4em;
    line-height:100px;
    color: #0ff;
}
.container2 .box2:hover .icon2 {
    transform:scale(0);
}
.container2 .box2 .details2 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#03a9f4;
    transition:0.5s;
    transform:scale(2);
    opacity:0;
}
.container2 .box2:hover .details2 {
    transform:scale(1);
    opacity:1;
}
.container2 .box2 .details2 h3 {
    margin:0;
    padding:0;
    line-height:100px;
    font-size:21px;
    color:#fff;
}
.container2 .box2 .details2:nth-child(2) .details2 {
    background:#e91e63;
}
.container .box .details:nth-child(2) .details {
    background:#607d8b;
}