JSFiddle - React, Tailwind, and code Playground

by crnacura

HTML

<div class="moo">
    <h2>Some title</h2>
    <p>Some description</p>
</div>

CSS

.moo {
    background: #aaa;
    width: 100%;
    height: 500px;
    font-family: sans-serif;
    font-size: 6em;
    perspective: 1200px;
}

h2, p {
    margin: 0;
    opacity: 0;
    color: #fff;
    transform: translate3d(0,100px,121px);
    transition: transform 0.6s, opacity 0.6s;
    text-outline: 1px solid #000;
}

.moo:hover p {
    transition-delay: 0.1s;
}

.moo:hover h2,
.moo:hover p {
    opacity: 1;
    transform: translate3d(0,0px,121px);
}