title: CSS: transform scale with position absolute
body: <p>I have a little  problem with position: absolute. Let me explain.</p>
  
  <p><a href="https://i.stack.imgur.com/WpQEd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WpQEd.png" alt="enter image description here"></a></p>
  
  <p>After hover I have something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/n5qsh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n5qsh.png" alt="enter image description here"></a></p>
  
  <p>CSS code:</p>
  
  <pre><code>.option {
      width: 50px;
      height: 50px;
      box-shadow: 1px 1px 1px 1px  #888;
  }
  
  .option:hover {
      transform: scale(2.25, 2.25);
      transition-duration: 0.01s;
      z-index:10;
      position: absolute;
  }
  </code></pre>
  
  <p>I used transform: scale to enlarge the element after hovering over the option.
  However, to achieve the desired effect I have to add the <code>position: absolute</code> attribute - with that, the option goes out the div after hover. Hover works fine but the rest 3 opitons goes left - is there any way to fix that? I want to still display the 4 options after hover, not to cut the rest.</p>
  
  <p>Without <code>position:absolute</code> the element doesn't go out of div.</p>
  
  <p><a href="https://i.stack.imgur.com/oFefd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oFefd.png" alt="enter image description here"></a></p>