Hover to swap element positions

So simple yet so complex, kind of like that girl in high school who dropped out to hitch-hike across the country. So crazy yet so beautiful.

by Matthew Day

HTML

<div class="wrap">
    <div class="wordbox king">Ground</div>
    <div class="wordbox queen">Under</div>
</div>

CSS

.wrap {
    font-family: Helvetica;
    font-size: 3em;
    position: relative;
    width: 300px;
    height: 120px;
    margin: 80px auto 0;
    border: 1px solid rgba(200,200,200,.9);
    text-align: center;
}

.wordbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: gray;
    transition: all .5s ease-in-out;
}

.queen {
    background: white;
    top: 60px;
}

.wrap:hover .king {
    top: 60px;
    background: white;
}
.wrap:hover .queen {
    top: 0;
    background: gray;
}