CSSだけで、アニメーションするheverエフェクトの実装。数が多いので、いろいろなシーンで使えそうです。それぞれ「Home」、「About」、「Contacts」にオンマウスするとエフェクトが発動します。

基本的なhtmlのソース

  <section class="section">
    <h2 class="title">Effect 1</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">Contacts</span></a>
      </li>	
    </ul>
  </section>