Move/animate div or element to screen corner on click or hover with CSS only

If you want to move an element to a screen corner with CSS only, theres a simple Solution with CSS3.

Demo:

Notice that you have to attach the hover-state to the parent div, not the moving element, otherwise it will slip away from your mousepointer and the hover would be removed.

Code:

<style>
.fullwidth {
position: relative;
height: 500px;
width: 100%;
background-color: red;
}
.moving {
position: absolute;
top: 10%;
left: 20%;
-moz-transition: 1s ease;
-webkit-transition: 1s ease;
-o-transition: 1s ease;
transition: 1s ease;
width: 50px;
height: 50px;
background: yellow;
}
.fullwidth:hover .moving {
left: 100%;
top: 100%;
transform: translate(-100%, -100%)
}
</style>
<div class="fullwidth">
<div class="moving">
</div>
</div>

Leave a Reply

Your email address will not be published.