Emily Waite Emily Waite - 2 years ago 93
Javascript Question

How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

I am trying to make a div box fall when the mouse hovers over it. So far I have done this in css using @keyframes but the box appears back at the top when you stop hovering.

I want the boxes to stay at the bottom of the page, as if they had fell. Is there a way to do this in css or Jquery? Thanks!

Answer Source

Although the animation is not smooth, I think this what you are looking for.

Here is a Codepen I just created. If you want it to be at the bottom of its wrapper instead of the body, you should give your wrapper div a position: relative.

div.drop-me {
  width: 200px;
  background: #000;
.hovered {
  position: absolute;

<div class="drop-me"></div>


Add this to your head

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download