.hover {
    overflow: hidden;
    perspective: 400px;
}
.hover .overlay {
    transform: translate3d(0, -100%, 0);
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hover.mouseenter.top {
    perspective-origin: center top;
}
.hover.mouseenter.top .overlay {
    animation-name: swing--enter-top;
    transform-origin: center top;
}
.hover.mouseenter.right {
    perspective-origin: right center;
}
.hover.mouseenter.right .overlay {
    animation-name: swing--enter-right;
    transform-origin: right center;
}
.hover.mouseenter.bottom {
    perspective-origin: center bottom;
}
.hover.mouseenter.bottom .overlay {
    animation-name: swing--enter-bottom;
    transform-origin: center bottom;
}
.hover.mouseenter.left {
    perspective-origin: left center;
}
.hover.mouseenter.left .overlay {
    animation-name: swing--enter-left;
    transform-origin: left center;
}
.hover.mouseleave.top {
    perspective-origin: center top;
}
.hover.mouseleave.top .overlay {
    animation-name: swing--leave-top;
    transform-origin: center top;
}
.hover.mouseleave.right {
    perspective-origin: right center;
}
.hover.mouseleave.right .overlay {
    animation-name: swing--leave-right;
    transform-origin: right center;
}
.hover.mouseleave.bottom {
    perspective-origin: center bottom;
}
.hover.mouseleave.bottom .overlay {
    animation-name: swing--leave-bottom;
    transform-origin: center bottom;
}
.hover.mouseleave.left {
    perspective-origin: left center;
}
.hover.mouseleave.left .overlay {
    animation-name: swing--leave-left;
    transform-origin: left center;
}

@keyframes swing--enter-top {
    0% {
        transform: rotate3d(-1, 0, 0, 90deg);
    }
    100% {
        transform: none;
    }
}
@keyframes swing--enter-right {
    0% {
        transform: rotate3d(0, -1, 0, 90deg);
    }
    100% {
        transform: none;
    }
}
@keyframes swing--enter-bottom {
    0% {
        transform: rotate3d(1, 0, 0, 90deg);
    }
    100% {
        transform: none;
    }
}
@keyframes swing--enter-left {
    0% {
        transform: rotate3d(0, 1, 0, 90deg);
    }
    100% {
        transform: none;
    }
}
@keyframes swing--leave-top {
    0% {
        transform: none;
    }
    100% {
        transform: rotate3d(-1, 0, 0, 90deg);
    }
}
@keyframes swing--leave-right {
    0% {
        transform: none;
    }
    100% {
        transform: rotate3d(0, -1, 0, 90deg);
    }
}
@keyframes swing--leave-bottom {
    0% {
        transform: none;
    }
    100% {
        transform: rotate3d(1, 0, 0, 90deg);
    }
}
@keyframes swing--leave-left {
    0% {
        transform: none;
    }
    100% {
        transform: rotate3d(0, 1, 0, 90deg);
    }
}