title: Using CSS transition to change element position
body: <p>I want to change a position of a div on hover, which I can do with following code. As I hover anywhere on the <code>.box</code>, the position of <code>.info</code> is changed from bottom to top.</p>
  <p>I want to change its position with the transition effect, so that it looks like is moving up instead up appearing quickly. Can it be done using the CSS only?</p>
  <p>I am trying to use the transition property but cannot make it work. Here's my code:</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div class=&quot;box&quot;&gt;
      &lt;div class=&quot;img&quot;&gt;&lt;img src=&quot;http://i.imgur.com/SGw04SV.jpg&quot; /&gt;&lt;/div&gt;
      &lt;div class=&quot;info&quot;&gt;
          &lt;div class=&quot;title&quot;&gt;Hello world&lt;/div&gt;
          &lt;div class=&quot;more&quot;&gt;more stuff&lt;/div&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>.box{
      width: 400px;
      height: 400px;
      overflow: hidden;
      position: relative;
      -moz-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  }
  
  .info{
      position: absolute;
      bottom: 0;
      
  }
  
  .box:hover .info{
      top: 0;
  }
  </code></pre>
  <p><strong>Demo:</strong>
  <a href="https://jsfiddle.net/fXXsS/" rel="nofollow noreferrer">https://jsfiddle.net/fXXsS/</a></p>