<div class="social-icons">
  <a href="#"  title="facebook"> 
    <i class="fa fa-facebook-square" aria-hidden="true"></i>
  </a>
  <a href="#" title="twitter"> 
    <i class="fa fa-twitter-square" aria-hidden="true"></i>
  </a>
  <a href="#" title="instagram">  
    <i class="fa fa-instagram" aria-hidden="true"></i>
  </a>
  <a href="#" title="youtube">
    <i class="fa fa-youtube-square" aria-hidden="true"></i>
  </a>
  <a href="#" title="linkedin">
    <i class="fa fa-linkedin-square" aria-hidden="true"></i>
  </a>
  <a href="#" title="pinterest">
    <i class="fa fa-pinterest-p" aria-hidden="true"></i>
  </a>
  <a href="#" title="camera">
    <i class="fa fa-camera-retro" aria-hidden="true"></i>
  </a>
</div>

.social-icons{
	padding:30px;
	background-color:#00506b;
  text-align: center;
}
.social-icons a{
	color:#fff;
  line-height:30px;
  font-size:30px;
  margin: 0 5px;
  text-decoration:none;
  
}
.social-icons a i{
	line-height:30px;
  font-size:30px;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1); 
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1); 
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
}
.social-icons a:hover i{
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);   
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}