CSS
html, body {
background: #B993D6;
background: linear-gradient(to left, #B993D6 , #8CA6DB);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
ul {
display: flex;
justify-content: space-around;
width: 100%;
padding-left: 0;
}
li {
list-style: none;
font-size: 2.5em;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 4px;
}
a {
color: #444;
text-decoration: none;
position: relative;
}
a:hover:before {
clip: rect(0, 190px, 190px, 0);
}
a:before {
position: absolute;
left: 0;
top: 7px;
content: attr(data-content);
display: inline-block;
color: #fff;
width: 100%;
clip: rect(0, 0, 0, 0);
-webkit-transition: clip cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;
transition: clip cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;
}
1 Response