Quero uma imagem que esta em float:right
vá para float:left
, mas com algum tipo de transição.
-
matheus, qual a sua duvida em relação a isso? voce começou a escrever algum código? pode compartilhar conosco?– RFLCommented 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– matheusCommented 22/11/2016 às 1:14
2 Respostas
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
paraa
, para que o:hover
funcione;o
:hover
pode ser aplicado diretamente noimg
, 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 blocoa
interno, e usar a imagem embutida nesse bloco.
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...