Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno Conte

Efeito ao passar o mouse

Por , em Desenvolvimento frontend

Recommended Posts

Cleiton Pereira    1

Cleiton Pereira
Postado 
<!DOCTYPE html>

<html>

<head>
  <style> 
    div
    {
      position:relative;
      width:300px;
      height:200px;
      background:red;
    }

    div > div
    {
      width:300px;
      height:50px;
      background:rgba(0, 0, 0, 0.1);
      position:relative;
      top:200px;

      transition:all 2s;
      -moz-transition:all 2s; /* Firefox 4 */
      -webkit-transition:all 2s; /* Safari and Chrome */
      -o-transition:all 2s; /* Opera */
    }

    div:hover > div
    {
      top:150px;
    }
  </style>
</head>

<body>

  <div>
    <div></div>
  </div>

</body>

</html>

 

 

Exemplo online: http://jsfiddle.net/kFtdB/1/

 

Simples apenas com CSS!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito