JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<div id='outer'>
    <div id='inner'>
        Animate on hover in & out
    </div>
    <div id='inner1'>
        Animate on hover in only 
    </div>
    <div id='inner2'>
        Animate on hover out only 
    </div>
</div>

CSS

#outer{
    background-color:#aaa;
    width:300px;
    height:200px;
}
#inner{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner{
    opacity:1;
}
#inner1{
    opacity:0;
}
#outer:hover #inner1{
    opacity:1;
    transition:opacity 2000ms;
}
#inner2{
    opacity:1;
}
#outer:not(:hover) #inner2{
    opacity:0;
    transition:opacity 2000ms;
}