About

Text Hover Effect is a Sass mixin library that consists of effects for typography that are triggered on hover and focus. Effects are made with pseudoelements ::after and ::before and CSS3 transitions. See all of them here.

Getting Started

            
              
               bower install text-hover-effects

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

How To Use

1. The Sass Way

After you downloaded bower package or cloned it from git, you will have this file structure:

         
           
            /* structure */

            |--effects/
            |--_effects.scss
            |--_defaults.scss
            |--_css_classes.scss
            |--_base.scss

Import effect.scss file. That file imports all of the mixins. If you need only several effects, delete unnecessary imports.

            
              
                /* style.scss */

                @import "bower_components/text-hover-effects/sass/effects";

After you have all the files downloaded, you are ready to use effects. Include transition-opt to an element you wish to apply effect to. Then add name of the effect. For example:

       
         
           .element { 
               @include transition-opt;
               @include underline-left;
         }

Result

Be careful with using CSS #id selector because it will overwrite several styles. It is recommended to use classes instead.

If you want to apply effects simply with CSS classes, use_css-classes.scss file. It will import all effects with coresponding class names. For example, underline-left effect will be available in underline-left CSS class. After that you can just apply CSS classes to your elements, for example: element class and underline-left class. Element class holds the base of transition and underline-left is the transition itself:

          
            
              /* style.scss */
              @import "bower_components/text-hover-effects/sass/css-classes";
             
              /* index.html */
              <p class="element underline-left">Your text </p>

2. The CSS Way

The css way is longer way. But worry not! I will take you step by step. Base.css file has all the defaults and all the basic styles. Copy-paste everything from base.css. Now you have element class available.

It's time to pick your effect! Let say you picked underline-left. Go to file underline-left.css in css/effects/underline/ and copy and paste code to your file. Now you have underline-left class available.

Apply those two classes to your element: element and underline-left. That is it!

       
         
          .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;
          }

Result

Customize

1. The Sass Way

Mixin transition-opt has several options. You can change each of them. These are defaults

   
     
       .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 */
       
       )};

Change whichever property you want, but be careful with changing display property. It is recommended to use display: inline because then width of the transition will be equal to the width of an element. If you change to display: block, it will change the width of transition and then you must change the width and margin of an element. For example:

   
     
       .element { 
           width: 100%;
           @include transition-opt(
              $display: block
           )

           @include underline-right;
     };

Result

   
     
       .element { 
           width: 50%;
           margin: 0 auto;
           @include transition-opt(
              $display: block
           )

           @include underline-right;
     };

Result

2. The CSS Way

CSS styles are easy to customize. As it has been said already, base.css has all the basic styles and all the defaults. Change whichever property you want in, but again be careful with changing display property. If you want to add delays, you will have to add them manually. Comments in base.css will tell you where to add delays.

Supported Elements

List of supported elements:

H1

H2

H3

H4

H5

H6

a span em b

Although library is made for typography, it could be used for several other elements such as buttons.

   
     
       button { 
           background-color: #2C3E50;
           border: 1px solid #2C3E50;
           font-size: 3em;
           color: #fff;
           @include transition-opt(
               $hover-color: #2C3E50,
               $transition-color: #FFF
       )

       @include fill-closing-horizontal; 
     };

Under the hood

All transitions are made with pseudoelements ::before and ::after.

Each element that has transition-opt mixin included will have ::before, ::after or both of them. Mixin transition-opt sets the base for transition. It allows you to set the options. It triggers hover and focus event. You can see code in _base.scss.

Each transition includes line-opt mixin, which sets width, transition-width, height, transition-height, position of an element and type of pseudoelements. The default width and height is 3px.

When hovered or focused, some pseudoelements have only maximum height or maximum width. For example, underline-right transition has maximum width set to 100%, while height is set to default, that is 3px. Some have maximum height set to 100%, while width is set to default, that is 3px. For example, left-up.

Some effects have maximum height and maximum width. For example, all transition in fill-corners group.

If you want to change these defaults, go to defaults.scss file in the sass/effects directory.

Line-opt depends on the type of transition. It allows to choose which pseudoelement should be created for particular transition. For example, overline-left transition is created only with ::after pseudoelement.

   
     
      @mixin overline-left {
          @include line-opt(
              pseudoafter,
              $transition-height: $height
          );

          &:after {
              right: 0%;
              top: 0%;
          } 
    }

Result

First, we define mixin overline-left. Then we include line-opt mixin and define the type of pseudoelement which is here pseudoafter. After that, we define the transition width. Since the default transition-width in line-opt is 100%, we do not need to set it explicitly. But default transition-height in line-opt is also 100% and we do not want that. We want it to remain the same. That is why we set it to the height of an element which is 3px.

Some transitions need both pseudoelements. For example: overline-closing:

   
     
      @mixin overline-closing {
          @include line-opt(
              pseudoafter,
             $transition-height: $height,
             $transition-width: $half-width 
          );

          @include line-opt(
              pseudobefore,
              $height: $height,
              $transition-width: $half-width
          );

        &:after {
          left: 0%;
          top: 0%;
        } 

        &:before {
          right: 0%;
          top: 0%;
        } 
      }

Result

Mobile Support

Effects work on touchstart and touchend events. When transition-opt is included, default touch behaviour will be removed for all browsers. In other words, user-select is set to none.

Browser Support

Effects are supported in Chrome,Firefox and IE.

Contributing

All contributions are welcome! Feel free to create pull request, add new transitions or improve code.