CODEWITHSUNDEEP
htmlcss
Kimberly Wright
Kimberly Wright

Reputation: 531

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>

Upvotes: 0

Views: 98

Answers (1)

moped
moped

Reputation: 2247

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

Upvotes: 2

Related Questions