How to do small animation with js

Question

How to do small animation with js

Navigation

#1 by (2 votes)

1

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 over a little div showing information, and when the mouse comes out an animation of it will go down, like this:

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

javascript html

asked by anonymous 05.04.2017 / 16:06

1 answer

TFS Automatic Merge without Check Conflicts How to create nested array from information received via POST

score 2 · Accepted Answer

You can leave a div with the hidden texts, and display when the mouse 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>