Check out my code snippet on JSFIDDLE: https://jsfiddle.net/8f3vLh0a/14/
I am using font awesome icons and I would like to add a circling effect on hover similar to this demo: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
How can I implement this circling effect in my JSFIDDLE demo? Below is the HTML code snippet:
<div class="container">
<ul class="icon-menu">
<li class="icon-box home"> <i class="fa fa-home fa-4x"></i>
<a href="#">
<span class="icon home "></span>
<h2>Home</h2>
</a>
</li>
<li class="icon-box aboutme">
<i class="fa fa-home fa-4x"></i>
<a href="#">
<span class="icon aboutme"></span>
<h2>About Me</h2>
</a>
</li>
<li class="icon-box portfolio">
<i class="fa fa-home fa-4x"></i>
<a href="#">
<span class="icon portfolio"></span>
<h2>Portfolio</h2>
</a>
</li>
<li class="icon-box blog">
<i class="fa fa-home fa-4x"></i>
<a href="#">
<span class="icon blog"></span>
<h2>Blog</h2>
</a>
</li>
<li class="icon-box contact"> \
<i class="fa fa-home fa-4x"></i>
<a href="#">
<span class="icon contact"></span>
<h2>Contact</h2>
</a>
</li>
</ul>
</div>
</div>