css3HoverNav

by Gulam Jilani

HTML

<div class="link-group-1">
  <nav>
      <a href="demo1.html" class="box demo-1"> <i class="fa fa-hand-o-right"></i> <span>Demo 1</span> </a>
      <a href="demo2.html" class="box demo-1"> <i class="fa fa-hand-o-up"></i> <span>Demo 2</span></a>
      <a href="demo3.html" class="box demo-1">  <i class="fa fa-hand-o-left"></i>  </i> <span>Demo 3</span> </a>
      <a href="demo4.html" class="box demo-1">  <i class="fa fa-thumbs-o-up"></i> <span>Demo 4</span></a>

  </nav>
    <nav>
    	<a class="demo-2 Width" data-text="Demo 1" href="demo1.html">Demo 1</a>
    	<a class="demo-2 Width" data-text="Demo 2" href="demo2.html">Demo 2</a>
    	<a class="demo-2 Width" data-text="Demo 3" href="demo3.html">Demo 3</a>
    	<a class="demo-2 Width" data-text="Demo 4" href="demo4.html">Demo 4</a>
    </nav>
  <nav>
      <a class="demo-3" href="demo1.html"> <span data-text="Demo 1">Demo 1</span></a>
      <a class="demo-3" href="demo2.html"><span data-text="Demo 2">Demo 2</span></a>
      <a class="demo-3" href="demo3.html"><span data-text="Demo 3">Demo 3</span></a>
      <a class="demo-3" href="demo4.html"><span data-text="Demo 4">Demo 4</span></a>
  </nav>
  <nav>
    <a class="demo-4" href="demo1.html">
      <span>
        <span>Demo 1</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

    <a class="demo-4" href="demo2.html">
      <span>
        <span>Demo 2</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

      <a class="demo-4" href="demo3.html">
      <span>
        <span>Demo 3</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>


    <a class="demo-4" href="demo4.html">
      <span>
        <span>Demo 4</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

  </nav>




 </div>

CSS

/*----style.css start below---*/
/*
Tutorial Name: CSS3 Hover Link Effects
Author: Samuel Dalusung
*/


/* GENERAL STYLES
-------------------------------------------------*/

html, 
body{
margin: 0;
padding: 0;
}

#container-1{
background: #314559;
width: 100%;
height: auto;
}



h1, h2, h3{
    text-align: center;

}

h1{
    font-family: 'Francois One', Arial, sans-serif;
    font-weight: 300;
    font-size: 52px;
    padding: 110px 0 20px 0;
    color: #fff;

}

h3{
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    font-size: 23px;
    color: #9f9e9b;
    margin-bottom: 23px;
}




a.back{
  font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    text-decoration: none;
    font-size: 16px;
  color: #fff;
  padding: 15px 10px;
  border: 1px solid #fff;
  text-transform: uppercase;
  text-align: center;
  margin: 20px auto;
  width: 15%;
  display: block;
}



a.back:hover{
background: #5f6f81;
color: #fff;
}


/* LINK GROUP
-------------------------------------------------*/

.link-group-1{
  background: #4E86BF;
  padding: 6.04% 0 9.5% 0;
  margin-top: 80px;
  text-align: center;
}


.link-group-2{
  background: #8e44ad;
   padding: 6.04% 0 9% 0;
  margin-top: 80px;
  height: auto;
  text-align: center;
}

.link-group-3{
  padding: 5.08% 0 10.5% 0;
  background: #2ecc71;
  margin-top: 80px;
  height: auto;
  text-align: center;
}

.Width{width:200px;}

.link-group-4{
  background: #e74c3c;
   padding: 6.04% 0 11.3% 0;
  margin-top: 80px;
  height: auto;
  text-align: center;
}


i{ margin-right: 8px;}

nav { display: inline-block; width:100%; }


nav a {
  position: relative;
  display: inline-block;
  margin: 12px 20px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 28px;
  font-family: 'Lato', Arial, sans-serif;
}

nav a:hover,
nav a:focus {
  outline: none;
}


/* DEMO 1
-------------------------------------------------*/

.box{
  color: #fff;
  padding:...