Ir para conteúdo

POWERED BY:

Arquivado

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

Pitag346

Efeito OnMouseOver

Por , em Desenvolvimento frontend

Recommended Posts

Pitag346    0

Pitag346
Postado

Olá pessoal, eu queria saber como eu faço um efeito desse:



Image normal:


niSGB4g.png




ao passar o mouse: a outra imagem vem de lado !


x6myxbn.png


MkorNLX.png



Alguém Sabe como faço esse efeito ??



Agradeço... caso queiram ver o site do efeito:


http://www.radioplayzone.com.br/



no rodapé, e a imagem dos boys e girls ela roda e troca a imagem...


caso saberem esse tambem



agradeço 2 vezes... kk




Aguardo Respostas amigos...





Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

Colocando a imagem de background e manipulando o 'background-position' com CSS (para subir e descer). Exemplo:

 

tune-in.png

 

Salve a imagem acima como "tunein.pgn" e tente isto:

 

HTML

<body>
  <div class = 'content'></div>
</body>

CSS:

.content {
    background: url("tunein.png") no-repeat;
    width: 94px;
    height: 22px; /* a imagem tem 44px, 22px é a metade dela */
    transition: all .1s ease-in;
}

.content:hover {
    background-position: 0 -22px;
}

 

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