Text Hover Effects

About

• Collection of effects for typography triggered on hover and focus
• Available in SCSS and CSS code
• Easy to customize
• Cross browser support
• Mobile support

See all of them on Demo

Getting Started

Git:

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

1. Choose between click and hover event

2. Copy-paste css file you need to your project from the text_hover_effects/css/ folder

3. If you picked hover, apply class text-hover text-hover-NAME_OF_THE_EFFECT. Let's say you picked effect named halfline-bottom-goes-left. Your code should look like this:

  <h1 class="text-hover text-hover-halfline-bottom-goes-left">
    Your Text
  </h1>

4. If you picked click, apply class text-click text-click-NAME_OF_THE_EFFECT. Let's say you picked effect named halfline-bottom-goes-left. Your code should look like this:

  <h1 class="text-click text-click-halfline-bottom-goes-left">
    Your Text
  </h1>