Check out this interactive demo using the provided HTML and CSS:
You can view the demo by clicking on this link.
/*CSS*/
.header {
margin: 0px;
padding: 0px;
width: 100%;
}
.headertable {
padding: 0px;
margin: 0px;
width: 100%;
border-spacing: 0px;
}
.headertabletr {
width: 100%;
padding: 0px;
margin: 0px;
}
.logoanimation a {
text-decoration: none;
color: black;
}
.logoanimation p {
display: inline-block;
margin: 0px;
}
.logodisapear1 {
overflow: hidden;
width: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.logoanimation:hover .logodisapear1 {
width: 23px;
}
.logoanimation:hover .logodisapear2 {
width: 56px;
}
.logodisapear2 {
overflow: hidden;
width: 0px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}<div class="container">
<div class="header">
<table class="headertable">
<tr class="headertabletr">
<td class="headerlogo">
<div class="logoanimation">
<a href="">
<p>
<</p>
<p>C</p>
<p class="logodisapear1">ode</p>
<p>U</p>
<p class="logodisapear2">niversity</p>
<p>/></p>
</a>
</div>
</td>
</tr>
</table>
</div>
</div>Have you noticed why 'ode' and 'niversity' appear to move up and shrink in size?
If you remove
overflow: hidden;
The text returns to its normal size, but it may overlap with other elements.