How to make small animation with js

Question

Hello, I would like to make a little responsive animation to show information.

For example, I have this rectangle:

<div id="mainDiv" >
    <div id="Rectangle" style="width: 200px; height: 300px; background: #3c9e43; margin-left: 20px; margin-top: 30px; float: left;"></div>
</div>

And when you hover your mouse over a little div showed information, and when the mouse came out there would be an animation of it lowering, like this:

I’d like to know a way to get to that.

Answer 1

You can leave a div with the hidden texts, and display when the mouse passes over, using Transitions in css to , something like:

#content {
  position: relative;
  background-color: green;
  overflow: hidden;
  width: 100px;
  height: 200px;
}

#content:hover > #info {
  bottom: 0;
  visibility: visible;
}

#content #info {
  background: brown;
  width: 100px;
  position: absolute;
  bottom: -30px;
  opacity: 1;
  visibility: hidden;
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -ms-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

<div id="content">
  <div id="info">
    Informação 1<br/> 
    Informação 1
  </div>
</div>