Suggested CSS Animations (Phase 1)

In this example below you will see how to do a Suggested CSS Animations (Phase 1) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by catertot, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright catertot ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Suggested CSS Animations (Phase 1)</title>
  
  
  <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/56083/hover-min.css'>
<link rel='stylesheet prefetch' href='https://www.promega.com/assets/css/category-page'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1 class="center-text">Suggested CSS Animations</h1>
<h1 class="center-text">Phase 1</h1>
<div class="navigation">
 <ul>
  <li><a href="#grow">Grow</a></li>
  <li><a href="#shrink">Shrink</a></li>
  <li><a href="#rotate">Rotate</a></li>
  <li><a href="#grow-rotate">Grow Rotate</a></li>
  <li><a href="#forwards">Forwards</a></li>
  <li><a href="#backwards">Backwards</a></li>
 </ul>
</div>

<div id="effects" class="effects">
 <section id="grow">
  <h2>Hover.css - Grow</h2>
  <p>Increases scale of item by 1.1x (110%).</p>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Text Links</p>
    <a href="#" class="hvr-grow">Plain link on it's own line</a></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum qui eaque fugiat, nihil unde maxime debitis optio dolor quo provident eligendi excepturi consectetur obcaecati odit officiis a pariatur? <a href="#" class="hvr-grow">Plain link inside a paragraph of text</a>,
     blanditiis maxime, ad quod sed doloribus dolor, atque consequatur repellendus fuga quam iste. Consectetur mollitia commodi ut.</p>
   </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Buttons</p>
    <button class="hvr-grow sol-border">Sol Border Button</button>
    <button class="hvr-grow sol-solid">Solid Sol Button</button>
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Three Column Small Images</p>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=25" alt="Small Image" class="hvr-grow"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=10" alt="Small Image" class="hvr-grow"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=50" alt="Small Image" class="hvr-grow"> </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Two Column Medium Images</p>
   <div class="col col--1-2"> <img src="https://unsplash.it/600/?image=10" alt="Medium Image" class="hvr-grow"> </div>
   <div class="col col--1-2"> <img src="https://unsplash.it/g/600" alt="Medium Image" class="hvr-grow"> </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">One Column Large Image</p>
    <img src="https://unsplash.it/800" alt="Large Image" class="hvr-grow">
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-grow"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-grow"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-grow"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-grow"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons with Sol on Hover</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-grow hover-sol"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-grow hover-sol"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-grow hover-sol"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-grow hover-sol"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

 </section>
 <section id="shrink">

  <h2>Hover.css - Shrink</h2>
  <p>Decreases scale of item to .9x (90%).</p>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Text Links</p>
    <a href="#" class="hvr-shrink">Plain link on it's own line</a></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum qui eaque fugiat, nihil unde maxime debitis optio dolor quo provident eligendi excepturi consectetur obcaecati odit officiis a pariatur? <a href="#" class="hvr-shrink">Plain link inside a paragraph of text</a>,
     blanditiis maxime, ad quod sed doloribus dolor, atque consequatur repellendus fuga quam iste. Consectetur mollitia commodi ut.</p>
   </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Buttons</p>
    <button class="hvr-shrink sol-border">Sol Border Button</button>
    <button class="hvr-shrink sol-solid">Solid Sol Button</button>
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Three Column Small Images</p>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=25" alt="Small Image" class="hvr-shrink"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=10" alt="Small Image" class="hvr-shrink"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=50" alt="Small Image" class="hvr-shrink"> </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Two Column Medium Images</p>
   <div class="col col--1-2"> <img src="https://unsplash.it/600/?image=10" alt="Medium Image" class="hvr-shrink"> </div>
   <div class="col col--1-2"> <img src="https://unsplash.it/g/600" alt="Medium Image" class="hvr-shrink"> </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">One Column Large Image</p>
    <img src="https://unsplash.it/800" alt="Large Image" class="hvr-shrink">
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-shrink"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-shrink"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-shrink"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-shrink"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons with Sol on Hover</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-shrink hover-sol"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-shrink hover-sol"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-shrink hover-sol"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-shrink hover-sol"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

 </section>
 <section id="rotate">

  <h2>Hover.css - Rotate</h2>
  <p>Rotates item 4 degrees clockwise.</p>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Text Links</p>
    <a href="#" class="hvr-rotate">Plain link on it's own line</a></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum qui eaque fugiat, nihil unde maxime debitis optio dolor quo provident eligendi excepturi consectetur obcaecati odit officiis a pariatur? <a href="#" class="hvr-rotate">Plain link inside a paragraph of text</a>,
     blanditiis maxime, ad quod sed doloribus dolor, atque consequatur repellendus fuga quam iste. Consectetur mollitia commodi ut.</p>
   </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Buttons</p>
    <button class="hvr-rotate sol-border">Sol Border Button</button>
    <button class="hvr-rotate sol-solid">Solid Sol Button</button>
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Three Column Small Images</p>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=25" alt="Small Image" class="hvr-rotate"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=10" alt="Small Image" class="hvr-rotate"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=50" alt="Small Image" class="hvr-rotate"> </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Two Column Medium Images</p>
   <div class="col col--1-2"> <img src="https://unsplash.it/600/?image=10" alt="Medium Image" class="hvr-rotate"> </div>
   <div class="col col--1-2"> <img src="https://unsplash.it/g/600" alt="Medium Image" class="hvr-rotate"> </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">One Column Large Image</p>
    <img src="https://unsplash.it/800" alt="Large Image" class="hvr-rotate">
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-rotate"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-rotate"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-rotate"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-rotate"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons with Sol on Hover</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-rotate hover-sol"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-rotate hover-sol"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-rotate hover-sol"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-rotate hover-sol"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

 </section>
 <section id="grow-rotate">

  <h2>Hover.css - Grow Rotate</h2>
  <p>Increases scale of item by 1.1x (110%) and rotates 4 degrees clockwise.</p>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Text Links</p>
    <a href="#" class="hvr-grow-rotate">Plain link on it's own line</a></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum qui eaque fugiat, nihil unde maxime debitis optio dolor quo provident eligendi excepturi consectetur obcaecati odit officiis a pariatur? <a href="#" class="hvr-grow-rotate">Plain link inside a paragraph of text</a>,
     blanditiis maxime, ad quod sed doloribus dolor, atque consequatur repellendus fuga quam iste. Consectetur mollitia commodi ut.</p>
   </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Buttons</p>
    <button class="hvr-grow-rotate sol-border">Sol Border Button</button>
    <button class="hvr-grow-rotate sol-solid">Solid Sol Button</button>
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Three Column Small Images</p>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=25" alt="Small Image" class="hvr-grow-rotate"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=10" alt="Small Image" class="hvr-grow-rotate"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=50" alt="Small Image" class="hvr-grow-rotate"> </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Two Column Medium Images</p>
   <div class="col col--1-2"> <img src="https://unsplash.it/600/?image=10" alt="Medium Image" class="hvr-grow-rotate"> </div>
   <div class="col col--1-2"> <img src="https://unsplash.it/g/600" alt="Medium Image" class="hvr-grow-rotate"> </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">One Column Large Image</p>
    <img src="https://unsplash.it/800" alt="Large Image" class="hvr-grow-rotate">
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-grow-rotate"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-grow-rotate"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-grow-rotate"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-grow-rotate"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons with Sol on Hover</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-grow-rotate hover-sol"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-grow-rotate hover-sol"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-grow-rotate hover-sol"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-grow-rotate hover-sol"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

 </section>
 <section id="forward">

  <h2>Hover.css - Forward</h2>
  <p>Moves item forward 8px along X-axis.</p>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Text Links</p>
    <a href="#" class="hvr-forward">Plain link on it's own line</a></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum qui eaque fugiat, nihil unde maxime debitis optio dolor quo provident eligendi excepturi consectetur obcaecati odit officiis a pariatur? <a href="#" class="hvr-forward">Plain link inside a paragraph of text</a>,
     blanditiis maxime, ad quod sed doloribus dolor, atque consequatur repellendus fuga quam iste. Consectetur mollitia commodi ut.</p>
   </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Buttons</p>
    <button class="hvr-forward sol-border">Sol Border Button</button>
    <button class="hvr-forward sol-solid">Solid Sol Button</button>
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Three Column Small Images</p>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=25" alt="Small Image" class="hvr-forward"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=10" alt="Small Image" class="hvr-forward"></div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=50" alt="Small Image" class="hvr-forward"> </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Two Column Medium Images</p>
   <div class="col col--1-2"> <img src="https://unsplash.it/600/?image=10" alt="Medium Image" class="hvr-forward"> </div>
   <div class="col col--1-2"> <img src="https://unsplash.it/g/600" alt="Medium Image" class="hvr-forward"> </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">One Column Large Image</p>
    <img src="https://unsplash.it/800" alt="Large Image" class="hvr-forward">
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-forward"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-forward"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-forward"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-forward"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons with Sol on Hover</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-forward hover-sol"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-forward hover-sol"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-forward hover-sol"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-forward hover-sol"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

 </section>
 <section id="backward">

  <h2>Hover.css - Backward</h2>
  <p>Moves item back 8px along X-axis.</p>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Text Links</p>
    <a href="#" class="hvr-backward">Plain link on it's own line</a></p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum qui eaque fugiat, nihil unde maxime debitis optio dolor quo provident eligendi excepturi consectetur obcaecati odit officiis a pariatur? <a href="#" class="hvr-backward">Plain link inside a paragraph of text</a>,
     blanditiis maxime, ad quod sed doloribus dolor, atque consequatur repellendus fuga quam iste. Consectetur mollitia commodi ut.</p>
   </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">Buttons</p>
    <button class="hvr-backward sol-border">Sol Border Button</button>
    <button class="hvr-backward sol-solid">Solid Sol Button</button>
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Three Column Small Images</p>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=25" alt="Small Image" class="hvr-backward"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=10" alt="Small Image" class="hvr-backward"> </div>
   <div class="col col--1-3"> <img src="https://unsplash.it/300/?image=50" alt="Small Image" class="hvr-backward"> </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">Two Column Medium Images</p>
   <div class="col col--1-2"> <img src="https://unsplash.it/600/?image=10" alt="Medium Image" class="hvr-backward"> </div>
   <div class="col col--1-2"> <img src="https://unsplash.it/g/600" alt="Medium Image" class="hvr-backward"> </div>
  </div>

  <div class="row">
   <div class="col">
    <p class="bold no-bottom-margin">One Column Large Image</p>
    <img src="https://unsplash.it/800" alt="Large Image" class="hvr-backward">
   </div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-backward"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-backward"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-backward"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-backward"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>

  <div class="row">
   <p class="bold no-bottom-margin">SVG Icons with Sol on Hover</p>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 90" class="hvr-backward hover-sol"><path d="M7.5 90h60c2.7 0 5.2-1.4 6.5-3.8s1.3-5.2 0-7.5L50 37.2V0H25v37.2L1 78.8C-.3 81.1-.3 84 1 86.3S4.8 90 7.5 90zm25-82.5h10v5h-10v-5zm0 31.7V17.5h10v21.7l25 43.3h-60l25-43.3z"/><path d="M47.3 57.5H27.7l-11.5 20h42.7l-11.6-20zM35 67.5h-5v-5h5v5zm10 5h-5v-5h5v5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 90" class="hvr-backward hover-sol"><path d="M65 73.5l5.7 5.7 3.5-3.5-9.2-9.2V65c0-4.1-3.4-7.5-7.5-7.5-.5 0-.9 0-1.3.1l-.2-.1 8.2-8.2-3.5-3.5L49 57.5l2.1 2.1c-3.7 3.5-8.5 5.4-13.6 5.4-5.3 0-10.4-2.1-14.1-5.9-3.8-3.8-5.9-8.8-5.9-14.1 0-1 .4-1.9 1.1-2.7 1.5-1.5 3.8-1.5 5.3 0l9.3 9.4 3-3 2.5 2.5L42 48l5.5 5.5L56 45l-5.5-5.5 3.2-3.2L27.5 10h-5l-10-10-10 10 10 10v.5c-6.4 6.6-10 15.3-10 24.5 0 9.3 3.6 18.1 10.3 24.7 5.4 5.4 12.2 8.8 19.5 9.9l-2.9 2.9H0V90h80v-7.5H65v-9zM49 45l-1.5 1.5-2-2L47 43l2 2zM27.5 17.1l19.2 19.2-7.9 7.9L19.6 25l7.9-7.9zM9.6 10l2.9-2.9 5.4 5.4-2.9 2.9L9.6 10zm6.7 56.2C10.6 60.5 7.5 53 7.5 45c0-6.8 2.3-13.3 6.4-18.6l10.4 10.4c-3.1-1.2-6.8-.5-9.2 2-1.7 1.7-2.6 3.8-2.6 6.2 0 6.7 2.6 13 7.3 17.7 4.7 4.7 11 7.3 17.7 7.3 1.7 0 3.3-.2 4.9-.5L36.9 75c-7.8-.2-15.1-3.3-20.6-8.8zm41.2 16.3H40l12.2-12.2c1.4 1.4 3.2 2.2 5.3 2.2v10zm0-15c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5S60 63.6 60 65s-1.1 2.5-2.5 2.5z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-backward hover-sol"><path d="M73.8 61.3C77.7 55.2 80 47.8 80 40 80 17.9 62.1 0 40 0S0 17.9 0 40s17.9 40 40 40c7.8 0 15.2-2.3 21.3-6.2l13.6 13.6c1.7 1.7 3.9 2.6 6.2 2.6 4.9 0 8.8-4 8.8-8.8 0-2.3-.9-4.6-2.6-6.2L73.8 61.3zM55 68.8c0-5.1-2.2-9.8-5.7-12.9-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 .8-.1 1.5-.2 2.2-3.1 1-6.4 1.5-9.8 1.5s-6.8-.4-9.9-1.4c-.1-.7-.2-1.5-.2-2.2 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 54.4 55 47.7 55 40c0-5.1-2.2-9.7-5.7-12.8-1.5 1.1-3.3 1.9-5.1 2.5 1.3.7 2.4 1.7 3.2 2.8H36.1c-1.6 1.2-2.7 3-3.2 5h16.9c.2.8.3 1.6.3 2.5 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 54.3 25 61 25 68.8v.1s-.1 0-.1-.1c-.8-.4-1.6-.9-2.3-1.3-9.1-5.9-15.1-16-15.1-27.5 0-12.5 7.1-23.4 17.5-28.8v.1c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-.8.1-1.5.2-2.2 3.1-1 6.4-1.5 9.8-1.5s6.7.4 9.8 1.4c.1.7.2 1.5.2 2.2 0 5.4-3.5 10.1-8.4 11.4l-4.4 1.1C30 25.6 25 32.3 25 40c0 5.1 2.2 9.7 5.7 12.8 1.5-1.1 3.3-1.9 5.1-2.5-1.3-.7-2.4-1.7-3.2-2.8H44c1.6-1.2 2.7-3 3.2-5H30.3c-.2-.8-.3-1.6-.3-2.5 0-5.4 3.5-10.1 8.4-11.4l4.4-1.1C50 25.7 55 19 55 11.2v-.1s.1 0 .1.1c.8.4 1.6.9 2.3 1.4 9 5.8 15.1 15.9 15.1 27.4 0 12.5-7.1 23.4-17.5 28.8zM81.2 85c-1 0-2-.4-2.7-1.1l-13-13c2-1.6 3.8-3.5 5.4-5.4l13 13c.7.7 1.1 1.7 1.1 2.7 0 2.1-1.7 3.8-3.8 3.8z"/></svg></div>
   <div class="col col--1-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90" class="hvr-backward hover-sol"><path d="M80 45V0H60v45h-5V0H35v45h-5V0H10v45H0v45h90V45H80zM67.5 7.5h5V30h-5V7.5zm0 27.5h5v10h-5V35zm-25-27.5h5v15h-5v-15zm0 20h5V45h-5V27.5zm-25-20h5V15h-5V7.5zm0 12.5h5v25h-5V20zM5 60h5v7.5c0 3 1.3 5.7 3.4 7.5H5V60zm80 25H5v-5h80v5zM17.5 67.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM38.4 75H26.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM63.4 75H51.6c2.1-1.8 3.4-4.5 3.4-7.5V60h5v7.5c0 3 1.3 5.7 3.4 7.5zm4.1-7.5V60h5v7.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5zM85 75h-8.4c2.1-1.8 3.4-4.5 3.4-7.5V60h5v15zm0-20H5v-5h80v5z"/></svg></div>
  </div>
 </section>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/catertot/suggested-css-animations-phase-1-PKwQxX */
body {
  margin: 0 auto;
  font-family: sans-serif;
  color: #333;
  line-height: 140%;
  padding: 0;
  width: 640px;
  border: 1px dotted #ccc;
}

h1, h2 {
  margin: 1em 0 .5em 0;
}

.center-text {
  text-align: center;
}

.navigation {
  display: inline-block;
  width: 100%;
}
.navigation ul {
  margin: 1em auto;
  display: block;
}
.navigation li {
  list-style: none;
  float: left;
  margin-right: 1.5em;
}
.navigation li:last-child {
  margin-right: 0;
}

section {
  margin-bottom: 16em;
  padding-top: 2em;
}

button {
  margin: 1em 1em 1em 0;
  border-radius: .375em;
  padding: .5em 1em;
  font-size: 1em;
}

.sol-border {
  background-color: #fff;
  border: 2px solid #fdb813;
}

.sol-solid {
  background-color: #fdb813;
  border: 2px solid #fdb813;
}

svg.hover-sol {
  fill: #666;
}

svg.hover-sol, svg.hover-sol:hover {
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

svg.hover-sol:hover {
  -webkit-animation-name: fadein;
          animation-name: fadein;
}

svg.hover-sol {
  -webkit-animation-name: fadeout;
          animation-name: fadeout;
}

@-webkit-keyframes fadein {
  from {
    fill: #666;
  }
  to {
    fill: #fdb813;
  }
}

@keyframes fadein {
  from {
    fill: #666;
  }
  to {
    fill: #fdb813;
  }
}
@-webkit-keyframes fadeout {
  0% {
    fill: #fdb813;
  }
  100% {
    fill: #666;
  }
}
@keyframes fadeout {
  0% {
    fill: #fdb813;
  }
  100% {
    fill: #666;
  }
}
svg {
  width: 80%;
  height: 80%;
}

.row {
  margin-bottom: 2em;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
}

.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
  -webkit-transform: scale(1.1) rotate(4deg);
          transform: scale(1.1) rotate(4deg);
}

.hvr-forward:hover, .hvr-forward:focus, .hvr-forward:active {
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
}

.hvr-backward:hover, .hvr-backward:focus, .hvr-backward:active {
  -webkit-transform: translateX(-8px);
          transform: translateX(-8px);
}


/*Downloaded from https://www.codeseek.co/catertot/suggested-css-animations-phase-1-PKwQxX */
// This code might solve the issue of a flash of color on the SVG icons when the page loads. I can't get it to work at the moment so it is commented out. OK.

// $(".hover-sol").on("mouseout", function() {
// 	$(this).addClass("alt-animation");
// });

Comments