JSFiddle - React, Tailwind, and code Playground

by SLAVOO SLAVOO

HTML

<div class="animacja" style="float: left; margin-left: 11px">
    <div class="jeden">
        Tekst tekst tekst tekstTekst tekst tekst tekst Tekst tekst tekst tekstTekst tekst tekst tekst Tekst tekst tekst tekstTekst tekst tekst tekst Tekst tekst tekst tekstTekst tekst tekst tekst
    </div>
    <div class="dwa">Tekst tekst tekst tekstTekst tekst tekst tekst Tekst tekst tekst tekstTekst tekst tekst tekst Tekst tekst tekst tekstTekst tekst tekst tekst Tekst tekst tekst tekstTekst tekst tekst tekst</div>
</div>

CSS

.dwa {
    background: rgba(0,0,0,0.5);
    width: 400px;
    height: 150px;
    pointer-events:none;
}

.animacja {
    position:relative;
    width:400px;
    height:150px;
    overflow: hidden;
}

.animacja .jeden + .dwa {
    position:absolute;
    transition:top .5s ease-in-out,opacity .7s ease-in-out;
    opacity:0;
    top:150px;
    left:0px;
}

.animacja .jeden {
    transition:opacity .7s ease-in-out;
}

.animacja .jeden:hover {
    opacity:.5;
}

.animacja .jeden:hover + .dwa {
    opacity:1;
    top:0px;
    left:0px;
}