Smooth CSS transition

by Daman Daman

HTML

<div class="selected_project">
    
    <div class="slider_overlay">
        <button>I want to fade in</button>
    </div>
    
</div>

CSS

.selected_project {
    position:relative;
    width:400px;
    height:200px;
    background:red;
}

.slider_overlay {
    position: absolute;
    left: 0;
    top:5px;
    opacity:0.0;
    transition: all 2s ease;
}

.selected_project:hover .slider_overlay {
    opacity:.9;
}