como fazer efeito para Div subir suavemente?

[DiogoJefferson 0]

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. 

 

[Sandson 1]

Cara eu não consegui reproduzir uma réplica, utiliza o jsfidle ou codepen pra copiar o teu código e coloca aqui. Fica mais fácil.

[rikaschmitt 54]

Seu código até que estava certo, apenas dei uma corrigida.

https://jsfiddle.net/qu99xcqr/

 

O que eu corrigi:

#servico1:hover #efeito1{
   top:-300px;
}

Você estava dando hover apenas na div do efeito, o que estava causando um bug na animação.. Com isso, deixei o efeito hover na div pai aplicando a div correta.

 

transition: all .1s linear;

Tirei o transition do hover e deixei na div mesmo, assim o efeito animado é visto quando o mouse sai e entra no objeto.