<div class="wrap">
  <h2><a href="https://th.seedthemes.com/seed-kit/parts/icon-fonts/">Seed Icons</a></h2>
  <a class="hover-fx"><i class="si-home-alt"></i></a>
  <a class="hover-fx"><i class="si-globe"></i></a>
  <a class="hover-fx"><i class="si-folder"></i></a>
  <a class="hover-fx"><i class="si-seedthemes"></i></a>
  <a class="hover-fx"><i class="si-thailand"></i></a>
  <a class="hover-fx"><i class="si-mail"></i></a>
</div>
<div class="wrap">
  <h2><a href="http://fontawesome.io/">FontAwesome Icons</a></h2>
  <a class="hover-fx"><i class="fa fa-font-awesome"></i></a>
  <a class="hover-fx"><i class="fa fa-cog"></i></a>
  <a class="hover-fx"><i class="fa fa-instagram"></i></a>
  <a class="hover-fx"><i class="fa fa-diamond"></i></a>
  <a class="hover-fx"><i class="fa fa-send"></i></a>
  <a class="hover-fx"><i class="fa fa-wordpress"></i></a>
</div>
<!-- forked from https://tympanus.net/Development/IconHoverEffects/ -->
.wrap {
  padding: 30px;
  text-align: center;
  background-color: #00989A;
}

.wrap a {
  color: #fff;
}

.hover-fx {
  font-size: 36px;
  display: inline-block;
  cursor: pointer;
  margin: 15px;
  width: 80px;
  height: 80px;
  line-height: 84px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  transition: 300ms;
}

.hover-fx:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  box-sizing: content-box;
  box-shadow: 0 0 0 3px #fff;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 300ms;
}

.hover-fx:hover {
  background-color: #fff;
  color: #00989A;
}

.hover-fx:hover:after {
  opacity: 1;
  transform: scale(1.15);
}

External CSS

  1. https://seedthemes.com/i/seed.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.