Below is a hidden text animation from Darkcode. It is hidden by default and only be shown when hovering. To see how it works, just click on the button Run Pen:
How to create a hidden text animation
Step 1: Add Html
<div class="text middle">
<span>D</span>
<span class="hidden">A</span>
<span class="hidden">R</span>
<span class="hidden">K</span>
<span>C</span>
<span class="hidden">O</span>
<span class="hidden">D</span>
<span class="hidden">E</span>
</div>Step 2: Add CSS
body {
margin: 0;
padding: 0;
background: #487eb0;
}
.middle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: center;
}
.text {
color: #fff;
font-size: 70px;
font-family: 'montserrat';
font-weight: 900;
cursor: pointer;
}
.hidden {
max-width: 0;
opacity: 0;
transition: 0.5s ease-in;
}
.text:hover .hidden {
opacity: 1;
max-width: 1em;
}