JSFiddle - React, Tailwind, and code Playground

by QW01_01

HTML

khfsvbsdfhvbskjfhvbsfv
<div class="picture">
    <img src="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg"/>
</div>

CSS

.picture{
    overflow:hidden;
}
.picture:after{
    content:"";
    position:absolute;
    background-color:rgba(0,0,0,0);    
    color:white;
    transition:0.5s;
    padding:100%;
    bottom:-100%;

}

.picture:hover:after{
    background-color:rgba(0,0,0,0.8);
}

.picture{
    position:relative;
    width:620px;
    height:465px;
}