JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all_extended">
    <div id="pucenas">
        <img id="cenas" src="http://lorempixel.com/80/80/"></img>
    </div>
    <div id="slide">
    </div>
</div>

CSS

#slide{
    display:inline-block;
    
    margin-left:30px;
    background-color:green;
    width:0px;
    opacity:0;
    
    overflow:hidden;
    position:absolute;
    bottom:0;
    top:0;
    
    transition: all 1s linear 1s;
    -webkit-transition: all 1s linear 1s;
}

#all_extended:hover #slide{
    width: 200px;
    opacity: 1;
}

#pucenas{
    display:inline-block;
}
#all_extended{
    position:relative;
}