É muito comum em sites de moda, ter uma imagem mostrada na página, e quando o usuário passa o mouse por cima, há uma outra imagem mostrada. Isso é possível fazer através do css usando o hover ou somente por javascript?
É muito comum em sites de moda, ter uma imagem mostrada na página, e quando o usuário passa o mouse por cima, há uma outra imagem mostrada. Isso é possível fazer através do css usando o hover ou somente por javascript?
Não precisa de JavaScript nesse caso, basta adicionar a imagem através do css, e não no html, para isto, veja o exemplo abaixo.
1ºadicione uma 'div' no seu código html:
<div class="imagem">
</div>2º adicione uma imagem através do css:
.imagem{
background-image: url(link ou caminho para imagem);
transition: .5s; /* Transição de 500ms para deixar suave */
}3º e por fim, adicione o hover e mude o 'url' da imagem:
.imagem:hover{
background-image: url(link ou caminho para imagem diferentes);
}