title: CSS animation Image from small to bigger and center
body: <p>i have been struggle for animate this image bigger and to centering.</p>
  
  <p>look at this video for sure, it's only 9 seconds.</p>
  
  <p><a href="https://youtu.be/b-5KPH_RGIg" rel="nofollow">https://youtu.be/b-5KPH_RGIg</a></p>
  
  <p>and this is the action</p>
  
  <p><a href="https://jsfiddle.net/09b74624/1/" rel="nofollow">https://jsfiddle.net/09b74624/1/</a></p>
  
  <p>i'm using :</p>
  
  <pre><code>.biggerCenter {transform:scale(0.1); transition:transform 0.5s linear; }
  .biggerCenter:hover { transform:translate(-50%, -50%) scale(1); }
  </code></pre>
  
  <p>how to get this thing done?</p>
  
  <p>what's wrong with my code?</p>
  
  <p>thanks</p>