title: Translate with CSS to the top of a div
body: <p>I have 3 boxes within a fluid container.</p>
  
  <p>Each box has a heading title, an icon and some text below.</p>
  
  <p>On <code>:hover</code> I want the icon to move to the top of the <code>&lt;div&gt;</code> and change it's size, I have managed to "achieve" it but using certain number of pixels.</p>
  
  <p>That will not work in mobile resolutions if the title text is longer and takes 2 lines.</p>
  
  <p>Here is what I have done so far:</p>
  
  <p><a href="http://jsfiddle.net/dannygm/sb8kLk33/" rel="nofollow">Fiddle here</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn"&gt;
          &lt;div class="service-box"&gt;
              &lt;h2&gt;Title&lt;/h2&gt;
              &lt;i class="fa fa-5x fa-paper-plane wow bounceIn market-icon" data-wow-delay=".1s"&gt;&lt;/i&gt;
              &lt;p class=""&gt;Certain text below the icon&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container{
      text-align:center;
  }
  
  .market-blocks{
      background: #3aa0d1;
      padding: 30px 0 30px 0;
      cursor:pointer;
  }
  
  .orange{
    background: #e97d68;
  }
  
  i.market-icon { 
     -webkit-transition: 1s ease-in;
      -moz-transition: 1s ease-in;
      -o-transition: 1s ease-in;
      transition: 1s ease-in
  }
  
  .market-blocks:hover i.market-icon {
      -webkit-transform: translate(0,-70px);
      -moz-transform: translate(0,-70px);
      -o-transform: translate(0,-70px);
      -ms-transform: translate(0,-70px);
      transform: translate(0,-70px);
      font-size: 1.8em;
  }
  </code></pre>
  
  <p>How can I do it? And also is there a better way to do the movement from the initial position to the top of the <code>&lt;div&gt;</code>?</p>