.flip-text {
    position: relative;
    height: 30px;
}
.flip-text span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    transition: all .5s;
    cursor: pointer;
}
.flip-text span:first-child {
    opacity: 1;
    transform: translateY(0);
}
.flip-text span:last-child {
    opacity: 0;
    transform: translateY(-10px);
}
.flip-text:hover span:first-child {
    opacity: 0;
    transform: translateY(10px);
}
.flip-text:hover span:last-child {
    opacity: 1;
    transform: translateY(0);
}