Kimberly Wright Kimberly Wright - 6 months ago 17
HTML Question

Apply circle transition to font awesome icons

I have fiddle here: https://jsfiddle.net/8f3vLh0a/14/

I use font awesome icons and I want to apply the circling effect on hover lke this demo here: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/

How can I apply this kind of circling effect on my demo on JSFIDDLE? here's my HTML:

<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>


Any idea? I would appreciate any JSFIDDDLE:

Answer

Here is your updated fiddle: https://jsfiddle.net/8f3vLh0a/17/

Part that is responsible for the "circling effect" is this

.icon-menu i {
    border-radius: 50%;
    box-shadow: 0 0 0 50px transparent;
    padding: 0.2em 0.25em;
    background: rgba(255,255,255,0.1);
    transform: translate3d(0, 0, 0);
    transition: box-shadow .6s ease-in-out;
}

.icon-menu li:hover i,
.icon-menu li:active i,
.icon-menu li:focus i {     
    box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
    transition: box-shadow .4s ease-in-out;
}

basically what it does is, that by default box-shadow is hidden (and shadow doesn't change coordinates of the element, like border, margin etc) and by hovering, you transition ease-in-out which makes it visible/hidden.
Circle behind icons can be tweaked to be proper circle (play around with padding).
Last thing that needs to be changes is coordinates of your icons, so I used 20px instead of 30px in your .fa class