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.


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.


.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%)
<div class="fullwidth">
<div class="moving">

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.