Smooth Hover Effect to Reveal Navigation Menu

<!-- first, let's make the nav -->

<nav class="layer">

<ul>

    <li><a href="">Home</a></li>

    <li><a href="">About</a></li>

    <li><a href="">Portfolio</a></li>

    <li><a href="">Blog</a></li>

    <li><a href="">Contact</a></li>

</ul>

</nav>

<!-- now let's create the layer that will initially cover the nav -->

<section class="front page layer">

    <h1>Hover anywhere <br>to reveal navigation</h1>

</section>

/* import the fonts */

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');

body{

    font-family: 'Roboto Condensed';

    text-transform: uppercase;

    background: #FF5964;

    height: 100%;

    overflow: hidden;

}

h1{

    font-size: 35px;

    text-align: center;

}

.layer{

    display: flex;

    /* the following two css selectors aren't recognized by all browsers -- you may need to use some -webkit- prefixes */

    align-items: center;

    justify-content: center;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    /* let's create some styling to smooth out the transition when we hover over the body of the page */

    transition: transform .4s;

    transform: perspective(800px) scale(1) translateX(0) rotateY(0);

    transform-style: preserve-3d;

}

nav{

    vertical-align: center;

}

nav ul{

    padding-left: 66.66%;

    font-size: larger;

    /* font-size: larger is a cool trick that sets the font-size to exactly one size larger than the font size of the parent element */

    line-height: 2;

}

nav ul li{

    list-style-type: none;

}

nav ul li a{

    /* let's change that ugly default anchor tag styling */

    text-decoration: none;

    color: #fff;

}

.front{

    background: #FFFBC1;

}

/* this next line of CSS creates the animation that occurs when we hover over the page. it uses transform to change the perspective, scale, and positioning of the .front section to reveal the new nav hiding beneath it */

body:hover .front{

    transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(25deg);

    /* hover over the text to check out the effect! */

}