<h1 class="title">
UI MENU CARDS
</h1>

<div class="container">

  <div class="button-container">
    <a href="#" class="card">
       <p><i class="fa fa-user-circle-o card-icon"></i></p>
       <p class="card-title">User</p>
    </a>
  </div>
  
  <div class="button-container">
    <a href="#" class="card">
       <p><i class="fa fa-snowflake-o card-icon"></i></p>
       <p class="card-title">Winter</p>
    </a>
  </div>
  
  <div class="button-container">
    <a href="#" class="card">
       <p><i class="fa fa-thermometer-0 card-icon"></i></p>
       <p class="card-title">Temperature</p>
    </a>
  </div>
  
  <div class="button-container">
    <a href="#" class="card">
       <p><i class="fa fa-battery card-icon"></i></p>
       <p class="card-title">Battery</p>
    </a>
  </div>
  
  <div class="button-container">
    <a href="#" class="card">
       <p><i class="fa fa-eye card-icon"></i></p>
       <p class="card-title">See more</p>
    </a>
  </div>
  
  <div class="button-container">
    <a href="#" class="card">
       <p><i class="fa fa-diamond card-icon"></i></p>
       <p class="card-title">Jewelry</p>
    </a>
  </div>
  
  <div class="button-container">
    <a href="#" class="card">
       <p><i class="fa fa-calendar-o card-icon"></i></p>
       <p class="card-title">Calendar</p>
    </a>
  </div>
  
  <div class="button-container">
    <a href="#" class="card">
       <p><i class="fa fa-code card-icon"></i></p>
       <p class="card-title">Code</p>
    </a>
  </div>

</div>

<p class="credits">
  Created by Sergiu N.
</p>

body {
font-family: 'Montserrat', sans-serif;
background: rgba(127,114,196,1);
background: -moz-linear-gradient(left, rgba(127,114,196,1) 0%, rgba(123,0,171,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(127,114,196,1)), color-stop(100%, rgba(123,0,171,1)));
background: -webkit-linear-gradient(left, rgba(127,114,196,1) 0%, rgba(123,0,171,1) 100%);
background: -o-linear-gradient(left, rgba(127,114,196,1) 0%, rgba(123,0,171,1) 100%);
background: -ms-linear-gradient(left, rgba(127,114,196,1) 0%, rgba(123,0,171,1) 100%);
background: linear-gradient(to right, rgba(127,114,196,1) 0%, rgba(123,0,171,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f72c4', endColorstr='#7b00ab', GradientType=1 );
}

/** EXTRA **/
.title {
  color: #FFF;
  text-align: center;
  font-size: 40px;
}

.credits {
  width: 100%;
  color: #FFF;
  float: left;
  text-align: center;
  opacity: .3;
}
/** EOF EXTRA **/

.container {
  margin: 0px;
  position: relative;
  color: #FFF;
  padding: 50px;
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
}

.button-container {
  width: 150px;
  height: 150px;
  position: relative;
  float: left;
  text-align: center;
}

.card {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #FFF;
  text-decoration: none;
}

.card:hover {
  background-color: #FFF;
  border-radius: 5px;
  transition: .3s;
  width: 180px;
  height: 180px;
  -webkit-box-shadow: -17px 15px 45px -2px rgba(0,0,0,0.32);
  -moz-box-shadow: -17px 15px 45px -2px rgba(0,0,0,0.32);
  box-shadow: -17px 15px 45px -2px rgba(0,0,0,0.32);
}

.card-icon {
  color: #FFF;
  font-size: 60px;
  transition: .3s;
}

.card:hover .card-icon {
  color: #a676f1;
  font-size: 80px;
  transition: .3s;
}

.card-title {
  font-family: 'Montserrat', sans-serif;
  color: #a676f1;
  opacity: 0;
  font-weight: bold;
  position: absolute;
  text-transform: uppercase;
  bottom: 0;
  transition: .3s;
}

.card:hover .card-title {
  opacity: 1;
  transition: .3s;
}