CSS
.center {
display: false;
position: absolute;
margin: false;
top: 50%;
left: 50%;
right: false;
bottom: false;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
width: 88%;
}
body {
background-color: #222;
}
.logo {
font-family: 'Raleway';
font-size: 21px;
letter-spacing: 6px;
font-weight: 300;
line-height: 25px;
width: 120px;
height: 120px;
overflow: hidden;
transform: translate(-50%, -50%) scale(1.5);
-webkit-transition: 0.4s ease, color 0.6s ease;
transition: 0.4s ease, color 0.6s ease;
color: #555;
cursor: pointer;
}
.logo::after {
content: "CODE CODE CODE";
display: false;
position: absolute;
margin: false;
top: 50%;
left: 50%;
right: false;
bottom: false;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 77%;
width: 90%;
padding-top: 13%;
background-color: #222;
}
.logo::before {
content: "";
display: false;
position: absolute;
margin: false;
top: 80%;
left: -135%;
right: false;
bottom: false;
height: 155%;
width: 155%;
background-color: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.7s ease;
transition: 0.7s ease;
}
.logo:hover {
color: #fff;
}
.logo:hover::before {
top: -25%;
left: -25%;
}
