Six elements that move on hover

by Matthew Day

HTML

<div class="wrap">
    <div class="wordbox m">music</div>
    <div class="wordbox v">moves</div>
    <div class="wordbox b">boy</div>
    <div class="wordbox d">dance</div>
    <div class="wordbox w">with</div>
    <div class="wordbox g">girl</div>
</div>

CSS

* {
    box-sizing: border-box;
}
.wrap {
    position: relative;
    width: 600px;
    height: 120px;
    font-family: Helvetica;
    margin: 80px auto 0;
    font-size: 1.7em;
    color: white;
    text-align: center;
}

.wordbox {
    position: absolute;
    width: 200px;
    height: 60px;
    padding-top: 12px;
    top: 0;
    left: 0;
    background: #216b95;
    transition: all .9s ease-in-out .3s;
}

.v {
    left: 200px;
    background: #4d9521;
}

.b {
    left: 400px;
    background: #576cab;
}

.d {
    top: 60px;
    left: 0;
    background: #0e9866;
}

.w {
    top: 60px;
    left: 200px;
    background: #3d87d4;
}

.g {
    top: 60px;
    left: 400px;
    background: #b63dd4;
}

.wrap:hover .d {
    top: 0px;
    left: 0px;
    background: #0e9866;
}

.wrap:hover .g {
    top: 0px;
    left: 200px;
    background: #b63dd4;
}

.wrap:hover .v {
    top: 0px;
    left: 400px;
    background: #4d9521;
}

.wrap:hover .w {
    top: 60px;
    left: 0px;
    background: #3d87d4;
}

.wrap:hover .m {
    top: 60px;
    left: 200px;
    background: #216695;
}

.wrap:hover .b {
    top: 60px;
    left: 400px;
    background: #576cab;
}