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{
    position: absolute;
    left: 0;
    top:5px;
    opacity:0.0;


}

.image_wrapper:hover .image_controls {
        -webkit-transition: all 2s ease;
    transition: all 2s ease;
    display: block;
    opacity:.9;
     
}