como fazer efeito para Div subir suavemente?

Olá,

Estou tentando fazer um efeito onde uma div sobe suavemente. Até consegui fazê-la subir, porém não com o efeito que gostaria. O efeito que gostaria de aplicar é o mesmo encontrado nos quatro blocos dispostos horizontalmente no site http://www.ambev.com.br/ , logo na página inicial. Alguém poderia me ajudar?

Segue meu código até então:

CSS:

	<style>

	 

	#servico1{

	     background-color: green;

	    height:300px;

	    width:200px;

	    overflow:hidden;

	}

	#efeito1{

	    position:relative;

	    width:100%;

	    height:300px;

	    top:-150px;

	    background-color: #030303;

	    opacity:0.5;

	    cursor:pointer;

	}

	#efeito1:hover{

	   top:-300px;

	    transition: all .1s linear;

	}

	 

	</style>

	 

	 

	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>

	 

	Pensei em usar a propriedade animate() do jQuery, porém não mudou muita coisa.