Html kód:

<nav class="cl-effect-5" id="cl-effect-5">

<a href="#cl-effect-5"><span data-hover="Seraglio">Seraglio</span></a>

<a href="#cl-effect-5"><span data-hover="Sumptuous">Sumptuous</span></a>

<a href="#cl-effect-5"><span data-hover="Scintilla">Scintilla</span></a>

<a href="#cl-effect-5"><span data-hover="Palimpsest">Palimpsest</span></a>

<a href="#cl-effect-5"><span data-hover="Assemblage">Assemblage</span></a>

</nav>

Css kód:

<style type="text/css">

nav a {

position: relative;

        font-family:arial!important;

display: inline-block;

margin: 15px 25px;

outline: none;

color: #fff;

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-5 a {

overflow: hidden;

padding: 0 4px;

height: 1em;

}

 

.cl-effect-5 a span {

position: relative;

display: inline-block;

-webkit-transition: -webkit-transform 0.3s;

-moz-transition: -moz-transform 0.3s;

transition: transform 0.3s;

}

 

.cl-effect-5 a span::before {

position: absolute;

top: 100%;

content: attr(data-hover);

font-weight: 700;

-webkit-transform: translate3d(0,0,0);

-moz-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

}

 

.cl-effect-5 a:hover span,

.cl-effect-5 a:focus span {

-webkit-transform: translateY(-100%);

-moz-transform: translateY(-100%);

transform: translateY(-100%);

} </style>