html kd
<nav class="cl-effect-11" id="cl-effect-11"> <a data-hover="Scintilla" href="#cl-effect-11">Scintilla</a> <a data-hover="Propinquity" href="#cl-effect-11">Propinquity</a> <a data-hover="Harbinger" href="#cl-effect-11">Harbinger</a> </nav></p>
css kd
<style type="text/css">
nav a {
position: relative;
display: inline-block;
margin: 5px 5px;
outline: none;
color: #ccc;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
nav a:hover,
nav a:focus {
outline: none;
}
.cl-effect-11 a {
padding: 10px 0;
border-top: 2px solid #ccc;
color: #ccc!important;
text-shadow: none;
}
.cl-effect-11 a::before {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
padding: 10px 0;
max-width: 0;
border-bottom: 2px solid #fff;
color: #000;
content: attr(data-hover);
-webkit-transition: max-width 0.5s;
-moz-transition: max-width 0.5s;
transition: max-width 0.5s;
}
.cl-effect-11 a:hover::before,
.cl-effect-11 a:focus::before {
max-width: 100%;
}</style>
| 
AJÁNLOM AZ OLDALT
"So bring your passport girl, I'm trying to show you the world"
