JSFiddle - React, Tailwind, and code Playground

HTML

<div id="servico1">
        <img src="imagens/drone.jpg" alt="imagem" />
        <div id="efeito1">
            <h1>AEROFOTOGAMETRIA</h1>
            <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para... </p>       
        </div>
    </div>

CSS

#servico1{
    background-color: green;
    height:300px;
    width:200px;
    overflow:hidden;
    cursor:pointer;
}
#efeito1{
    position:relative;
    width:100%;
    height:300px;
    top:-150px;
    background-color: #030303;
    opacity:0.5;
    transition: all .1s linear;
}
#servico1:hover #efeito1{
   top:-300px;
}