0

Quero uma imagem que esta em float:right vá para float:left, mas com algum tipo de transição.

2
  • matheus, qual a sua duvida em relação a isso? voce começou a escrever algum código? pode compartilhar conosco?
    – RFL
    Commented 22/11/2016 às 0:54
  • eu criei uma div com uma imagen dentro e fiz o seguinte la no css eu coloquei a imagen dentro da div em FLOAT RIGHT e depois coloquei a opção DIV;HOVER para a imagen ir para FLOAT LEFT deu certo so que eu queria fazer ele rolar de um lado a outro com uma trasição
    – matheus
    Commented 22/11/2016 às 1:14

2 Respostas 2

5

Float não é "animável", mas você pode conseguir algo do tipo usando posição absoluta e variando o left:

#area {
  position:relative;
  overflow:auto;
}

#area img {
  display:block;
  position:relative;
  margin-left:0;
  left:0;
  margin-left:0;
  transition:2s;
}

#area:hover img {
  left:100%;
  margin-left:-100px; // mesma largura da imagem
}

img {background:purple;width:100px;height:100px}
<div id="area">
  <img>
</div>


Considerações:

  • Caso queira compatibilidade com navegadores antigos, pode mudar a div para a, para que o :hover funcione;

  • o :hover pode ser aplicado diretamente no img, mas neste caso a pessoa pode ter que acompanhar o objeto com o mouse, senão ao se mover, o :hover deixa de atuar;

  • da mesma forma, se passar o :hover para a imagem, e quiser que funcione com navegadores mais antigos, precisa fazer um bloco a interno, e usar a imagem embutida nesse bloco.

1

Dentro do hover insira um transition: 5s; e coloque quantos segundos desejar para que a transição seja feita.. você ainda pode adicionar um transform: rotate(720deg); que sua imagem vai ir rodando de um lado para o outro, onde o valor de deg é quantos graus você quer que este elemento gire...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .