<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);
}
This Pen doesn't use any external JavaScript resources.