Image fixed on hover - html

Question

When hovering the image ,image moves to the left,I want it to stay at the new position where it moved to, while moving the pointer away.
Thanks in advance
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
#twit:hover .move{
transform: translate(-350px,0) rotate(-360deg);
transition:all 2s linear;
}
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>

Answer 1

What you want can be achieve, but you need to remove your :hover selector and use that as css animation. Another way is using jQuery mouseenter event.
Using CSS animation and removing hover selector.
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
.move{
-webkit-animation:mv 2s;
animation-fill-mode:forwards;
}
#-webkit-keyframes mv{
from{
transform: translate(0,0) rotate(0deg);
}
to{
transform: translate(-350px,0) rotate(-360deg);
}
}
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
Another way is using jQuery mouseenter event, which performs same css animation, but stop your element at new position.
$(document).ready(function(){
$("#twit").on("mouseenter",function(){
$("#twit > .object").addClass("nwmv");
});
});
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
.nwmv{
-webkit-animation:mvv 2s;
animation-fill-mode:forwards;
}
#-webkit-keyframes mvv{
from{
transform: translate(0,0) rotate(0deg);
}
to{
transform: translate(-350px,0) rotate(-360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>
Using Javascript,
var b = document.getElementById("twit");
b.onmouseenter = function mv(){
var a = document.querySelector(".move");
a.style.transition = "2s ease";
a.style.transform = "translate(-350px,0) rotate(-360deg)";
}
.object{
position:absolute;
}
.bird{
top: 50%;
left: 64%;
}
<div id="twit">
<div class="object bird move">
<img width="50px" height="50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0rasMS9P_knjCI0jPS2S3EavRVR57YSoOJSomU3tcmaxV_zom5cZWOg">
<b>Welcome Home</b>
</div>
</div>