JSFiddle - React, Tailwind, and code Playground

by Vitorino fernandes

HTML

<div id="mybox-id">
    <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>
    
    <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>
    
    <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>
    
    <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>
    
    
    <p>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>
    
    
</div>

CSS

#mybox-id {
    background: transparent;
    width:100%;
    height:500px;
    position:relative;
}
#mybox-id:after {
    content:"";
    background: linear-gradient(to top, rgba(229, 95, 218, 1) 40%, rgba(229, 95, 218, 1) 40%, transparent);
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    opacity:0;
    transition: all .5s ease-in;
    z-index:-1;
}
#mybox-id:hover:after{
    opacity:1;
}