I'm trying to move an object to another part of the page with hover. The problem is that I want it to stay at the new position even after my cursor is no longer pointing at that object. Is there any way to change css properties permanently using css only?
for examle, the object im trying to move has the id "movingFly" (It's a div with just the letter E in it)
* {
padding: 0px;
margin: 0px;
}
@font-face{
font-family:fly1;
src:url('Insects.ttf');
}
#movingFly {
font-family: fly2;
font-size: 150px;
float: left;
position: absolute;
z-index: 1;
}
#movingFly:hover {
transform: translate(200px, 100px);
transition: all 2s;
}<div id="movingFly">E</div>I've tried using transform to re-position it but it won't stay in its new position after moving the cursor from it.
