Simple fade

Simple example of an English word that changes to a spanish word upon hover.

by Matthew Day

HTML

<div class="wrap">
    <div class="vocab">
        <div class="english-word">cat</div>
        <div class="spanish-word">gato</div>    
    </div>
</div>

CSS

.wrap {
    position: relative;
    background-image: url("http://www.placekitten.com/g/400/400");
    background-repeat: no repeat;
    background-position: center center;
    background-size: cover;
    width: 400px;
    height: 400px;
    margin: 0;
    padding: 0;
}

.vocab {
    color: white;
    font-size: 3em;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
}

.english-word {
    position: absolute;
    width: 100%;
    top: 175px;
    padding: 8px 0;
    background: rgba(0,0,0,.4);
    transition: all .9s ease-in-out .3s;

}

.spanish-word {
    color: rgba(255,255,255,0);
    position: absolute;
    width: 100%;
    top: 175px;
    padding: 8px 0;
    transition: all .9s ease-in-out .3s;
}

.vocab:hover .english-word {
    background: rgba(0,0,0,0);
}

.vocab:hover .spanish-word {
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,1);
}