gbzbjY

gbzbjY.markdown

gbzbjY

A Pen by Captain Anonymous on CodePen.

License.

index.html

<ul>
  <li><a href="#about" id="menu-about">About</a></li>
  <li><a href="#work" id="menu-work">Work</a></li>
  <li><a href="#speaking" id="menu-speaking">Speaking</a></li>
</ul>

style.css

body { background-color:#F5ECD9; }

ul {
  list-style:none;
  margin:30px 20px;
  padding:0;
}

li {
  display:inline-block;
  padding:0 40px 0 0;
  font-size:22px;
  font-family:sans-serif;
  transition:opacity .3s ease-out;
}

a {
  position:relative;
  text-decoration:none;
  color:#3b3b3b;
  text-transform:uppercase;
  transition:color .2s ease-out;
}

a:after { 
  position:absolute;
  top:0;
  left:110%;
  z-index:-1;
  width:400px;
  opacity:0;
  transition:opacity .3s ease-in;
}

#menu-about:after { content:"me"; }
#menu-work:after { content:"I've done"; }
#menu-speaking:after { content:"where and when"; }

ul:hover li { opacity:.05; }
ul li:hover { opacity:1; }
li:hover a:after { opacity:1; }
a:hover { color:#E8275B; }