Text Hover Effects

1. Getting started

          
            
             bower install text-hover-effects
            
          
        

          
            
              git clone https://github.com/tonkec/text_hover_effects.git 
            
          
        

2. Simple to use

         
           
             .element { 

                 /* base of transition */
                 @include transition-opt;

                 /* name of transition */
                 @include underline-left;

           } 
         
       

3. Many options available

         
           
             .element { 
                 @include transition-opt(

                 $hover-color: #FFF, 
                 /* sets color of element when hovered */

                 $display: inline,
                 /* sets display property */

                 $transition-color: #FFF,
                 /* sets color of transition */

                 $transition-speed: 1s,
                 /* sets speed of transition */

                 $tranition-easing: ease-in-out,
                 /* sets easing of transition */

                 $delay-after: 0s,
                 /* sets transition delay for ::after */

                 $delay-before: 0s,
                 /* sets transition delay for ::before */

                 $padding: 10px
                 /* sets space between transition and element */

             )};
           

         
       

4. Available in CSS

          
           
              .underline-left:after { 
                 content: "";
                 position: absolute;
                 z-index: -1;
                 width: 3px;
              }

              .underline-left:after {
                  right: 0;
                  bottom: 0;
              }

              .underline-left:hover:after {
                  width: 100%;
                  height: 3px;
              }
              
          
        

5. Over 50 effects to choose from

6. Cross-browser and mobile support