Initials to Full Name Reveal CSS Only

My personal logo was made from just html and css. No javascript, and super fast to load. If you are interested in how I made this logo check it out on GitHub.

HTML

<div id="logo">
            <ul class="logo-text">
                <li>M</li>
                <li class="ghost">A</li>
                <li class="ghost">R</li>
                <li class="ghost">C</li>
                <li class="ghost">U</li>
                <li class="ghost">S</li>
                <li class="spaced">G</li>
                <li class="ghost">O</li>
                <li class="ghost">L</li>
                <li class="ghost">L</li>
                <li class="ghost">A</li>
                <li class="ghost">H</li>
                <li class="ghost">O</li>
                <li class="ghost">N</li>
            </ul>
        </div>

CSS

html {    
font-family: 'Roboto Slab', "Open Sans Regular", "Helvetica",   "Arial", sans-serif;    
font-size: 36px;    
background-color: #23272A;
}

ul, li { 
padding: none;    
float: none;    list-style: none;    
color: white;
}

.logo-text {    
color: #ffffff;    
padding: 0;    
margin: 0;    
float: left;    
cursor: pointer;    
border-bottom: 1px solid #ffffff;
}

.logo-text li {    
float: left;    
font-weight: 700;    
font-size: 2rem;    
opacity: 1;    
transition: all 750ms ease-in-out;   
max-width: 2rem;    
display: inline-block;
}

.logo-text li:first-child {
padding-left: 0;
}

.logo-text li.spaced {
padding-left: 0;
}

.logo-text:hover li.spaced {
padding-left: 0.5em;
}

.logo-text li.ghost {
opacity: 0;    
max-width: 0;
}

.logo-text:hover li {    
opacity: 1;    
max-width: 100%;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

360 Virtual Tours