CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Emily Waite
Emily Waite

Reputation: 25

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!

Upvotes: 1

Views: 289

Answers (1)

Tekeste Kidanu
Tekeste Kidanu

Reputation: 1990

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;
  height:200px;
  background: #000;
}
.hovered {
  position: absolute;
  bottom:0;
}

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

$('div.drop-me').hover(function(){
  $(this).addClass('hovered');
});

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>

Upvotes: 2

Related Questions