title: How to Get A Div to Smoothly Move Up Using CSS Transitions?
body: <p>The title kind of describes it. Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#main {
      float: left;
      width: 20%;
      height: 10vh;
      margin-top: 10vh;
      margin-left: 40%;
      text-align: center;
  }
  
  #k {
      font-family: Questrial;
      font-size: 70px;
      margin-top: -7px;
      margin-left: -2px;
      color: #404040;
      border-bottom: 2px solid #404040;
      line-height: 0.85;
  }
  
  #about {
      float: left;
      clear: both;
      width: 38%;
      height: 30vh;
      margin-top: 7vh;
      margin-left: 31%;
      text-align: center;
      background-color: #33CC33;
      border-radius: 100%;
      opacity: 0.6;
      transition: opacity .5s;
      -webkit-transition: opacity .5s;
      transition: margin-top .5s;
      -webkit-transition: margin-top .5s;
      transition: margin-bottom .5s;
      -webkit-transition: margin-bottom .5s;
  }
  
  #about:hover {
      opacity: 0.8;
      margin-top: 5vh;
      margin-bottom: 2vh;
  }
  
  #work {
      float: left;
      width: 38%;
      height: 30vh;
      margin-top: 0vh;
      margin-left: 10%;
      text-align: center;
      background-color: #323280;
      border-radius: 100%;
      opacity: 0.6;
      transition: opacity .5s;
      -webkit-transition: opacity .5s;
  }
  
  #work:hover {
      opacity: 0.8;
  }
  
  #contact {
      float: right;
      width: 38%;
      height: 30vh;
      margin-top: 0vh;
      margin-right: 10%;
      text-align: center;
      background-color: #FF6600;
      border-radius: 100%;
      opacity: 0.6;
      transition: opacity .5s;
      -webkit-transition: opacity .5s;
  }
  
  #contact:hover {
      opacity: 0.8;
  }
  
  .label {
   font-family: Questrial;
      color: white;
      font-size: 35px;
      margin-top: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;KURB - Home&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="kurb.css"/&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="main"&gt;
              &lt;p id="k"&gt;KURB&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="about"&gt;
              &lt;p class="label"&gt;Blah blah blah&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="work"&gt;
              &lt;p class="label"&gt;Blah blah blah blah blah&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="contact"&gt;
              &lt;p class="label"&gt;Blah blah blah blah&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically, what I'm trying to do is get the top div (#about) to rise up above the lower two by about 2 vh when moused over. As you can see, I've already kind of got it, but it's not doing an actual animation - it rises up instantly. Also, there should be a color transition on the mouseover - it should become less transparent. This works on the others, but not on this one.</p>
  
  <p>It gets really interesting when you get rid of the dashes in margin-top and margin-bottom. Then, instead of the bottom two slowly moving down, they all just kind of snap into place. This is what I'm looking for, only with an animation. I have no idea what's going on. Is there something I'm missing here? </p>