<section class="features">
<ul>
 <li>
  <a href="">
   <div class=icon><i class="icon-time"></i></div>
   <h2>Lorem Lip</h2>
   <p>Clock</p>
  </a>
 </li>
 <li>
  <a href="">
   <div class=icon><i class="icon-flag"></i></div>
   <h2>Lorem Lip</h2>
   <p>It's a Flag</p>
  </a>
 </li>
 <li>
  <a href="">
   <div class=icon><i class="icon-pencil"></i></div>
   <h2>Lorem Lip</h2>
   <p>Edit Me</p>
  </a>
 </li>
 <li>
  <a href="">
   <div class=icon><i class="icon-shopping-cart"></i></div>
   <h2>Lorem Lip</h2>
   <p>Lets Shop</p>
  </a>
 </li>
 <li>
  <a href="">
   <div class=icon><i class="icon-gift"></i></div>
   <h2>Lorem Lip</h2>
   <p>You Gift</p>
  </a>
 </li>
</ul>
</section>
body
{
background:#333333;
}
a
{
display:block;
width:100%;
height:91%;
padding-top:15px;
text-decoration:none;
}
h2
{
margin:5px 0px; 
padding:0px;
text-align:center;
font-size:20px;
font-family:verdana;
color:#000;
}
ul
{
margin:0px;
padding:0px;
list-style-type:none;
}

li
{
display:inline-block;
width:150px;
height:170px;
position:relative;
overflow:hidden;
background:#57c1ae;
-webkit-transition:all 300ms linear;
-moz-transition:all 300ms linear;
-ms-transition:all 300ms linear;
-o-transition:all 300ms linear;
transition:all 300ms linear;
}

.icon
{
width:75px;
height:75px;
background:#57c1ae;
border-radius:100%;
text-align:center;
margin:0 auto;
}

i
{
font-size:3em;
color:#000;
position:relative;
top:13px;
}
li a p
{
text-align:center;
font-family:verdana;
font-size:14px;
color:#57c1ae;
position:absolute;
bottom:-20px;
margin:0px;
width:100%;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}

li:hover
{
background:#fff;
-webkit-transform:scale(1.1);
-ms-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
-webkit-transition:all 300ms linear;
-moz-transition:all 300ms linear;
-ms-transition:all 300ms linear;
-o-transition:all 300ms linear;
transition:all 300ms linear;
z-index:999;
}
li:hover p
{
bottom:20px;
color:#000;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.features
{
margin:0 auto;
margin-top:30px;
width:800px;
}

External CSS

  1. https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.