Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.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.
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.