title: CSS: transform-origin
body: <p>I have a problem with transformation in CSS. </p>
  
  <pre><code>#test{
    height:100px;
    width: 100px;
    background-color: red;
    margin-left: 100px;
    margin-top: 100px;
  }
  
  #test:hover{
    transform : scale(2);
    transition:1s ease-in-out;
    transform-origin : left top;
  }
  </code></pre>
  
  <p>The problem is when you hover mouse over the <code>div</code> it is floating slightly up, and what I want to do is stick to the one place, and grow/rescale only right and bottom side.</p>
  
  <p><a href="https://codepen.io/anon/pen/QyYPMM" rel="nofollow noreferrer">Here is codepen link</a>.</p>
  
  <p>I hope You guys understood what I want to say.</p>