JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image_wrapper">
    
   <img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Yellow_flower_open.jpg" class="image_flower"></img>
    
    <div class="image_controls">
        <button>I want to fade in</button>
    </div>
    
</div>

CSS

.image_wrapper{
    position:relative;
}
.image_flower{
    width:80%;
}

.image_controls{
    display:none;
    position: absolute;
    left: 0;
    top:5px;
    opacity:0.0;
}

.image_wrapper:hover .image_controls {
    display: block;
    opacity:1.0;
    transition: opacity 2s linear;
}