Change position image with transition when mouseover it?

Float is not "animatable", but you can achieve something like this using absolute position and varying 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>

Considerations:

• If you want compatibility with old browsers, you can change div to a , so :hover works;

• :hover can be applied directly to img , but in this case the person may have to follow the object with the mouse, otherwise when moving, :hover stops acting; >

• In the same way, if you pass :hover to the image, and you want it to work with older browsers, you need to make an internal a block, and use the embedded image in that block.

Inside the hover, enter a transition: 5s; and enter as many seconds as you want for the transition to take place .. you can still add transform: rotate(720deg); that your image will be running from side to side, where the value of deg it's how many degrees you want this element to spin ...