title: Element animation with respect to its center using just css
body: <p>I have spend hours trying to find a solution that just requires css to work. I am trying to animate a div when it is hoverd, that its height and width be reduced uniformly.</p>
  
  <pre><code>&lt;div class="a"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Above is a simple div element with the following css:</p>
  
  <pre><code>.a {
      width: 350px;
      height: 350px;
      background: #000;
      margin: 100px 0 0 400px;
      transition: all 2s linear;
      position:fixed;
  }
  </code></pre>
  
  <p>I want to reduce the height and width of the element on hover from the center using just css. </p>