How To Build Pure CSS Social Media Hover To Counter Animation UI

Use: Font Awesome (Icon) grid CSS Hover Animation Social Counter 

Step 1: HTML

<div class="container">
<ul class="grid">
<li class="facebook">
<a href="">
<span class="fab fa-facebook-f"></span>
<div class="count">500 fans</div>
<div class="title">facebook</div>
</a>
</li>
<li class="twitter">
<a href="">
<span class="fab fa-twitter"></span>
<div class="count">500 fans</div>
<div class="title">Twitter</div>
</a>
</li>
<li class="google">
<a href="">
<span class="fab fa-google-plus-g"></span>
<div class="count">500 fans</div>
<div class="title">Google+</div>
</a>
</li>
<li class="youtube">
<a href="">
<span class="fab fa-youtube"></span>
<span class="count">500 fans</span>
<span class="title">Youtube</span>
</a>
</li>
<li class="instagram">
<a href="">
<span class="fab fa-instagram"></span>
<span class="count">500 fans</span>
<span class="title">Instagram</span>
</a>
</li>
<li class="pinterest">
<a href="">
<span class="fab fa-pinterest"></span>
<span class="count">500 fans</span>
<span class="title">Pinterest</span>
</a>
</li>
</ul>
</div>

Step 2: CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #f2f2f2;
font-family: sans-serif;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
.facebook{
background-color: rgba(59,89,153 ,1);
}
.twitter{
background-color: rgba(85,172,238 ,1);
}
.google{
background-color: rgba(221,75,57 ,1);
}
.youtube{
background-color: rgba(205,32,31 ,1);
}
.pinterest{
background-color: rgba(189,8,28 ,1);
}
.instagram{
background-color: rgba(228,64,95 ,1);
}
.container{
max-width: 80%;
margin: 10px auto;
background-color: #fff;
padding: 10px;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.5);
}
ul.grid{
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
}
ul.grid li{
border: 1px solid rgba(0,0,0,0.2);
height: 60px;
overflow: hidden;
}
ul.grid li a{
position: relative;
text-align: center;
display: block;
color: #fff;
text-shadow: 0 0 1px rgba(0,0,0,0.5);
line-hight: 50px;
}
ul.grid li a span{
display: block;
text-align: center;
}
ul.grid li a span.fab{
line-height: 50px;
font-size: 10em;
color: #fff;
text-shadow: 0 0 1px rgba(0,0,0,0.5);
display: block;
}
ul.grid li a .count{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: rgba(255,255,255,0.5);
font-size: 2rem;
transform: translateY(60px);
transition: .6s;
text-transform: uppercase;
font-weight: bold;
}
ul.grid li:hover a .count{
transform: translateY(0);
}
ul.grid li a .title{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: rgba(255,255,255,0.5);
font-size: 2rem;
transition: color .6s;
transform: translateY(0);
transition: .6s;
text-transform: uppercase;
font-weight: bold;
}
ul.grid li:hover a .title{
transform: translateY(60px);
}