CSS: transform scale with position absolute

Question

I have a little problem with position: absolute. Let me explain.

After hover I have something like this:

CSS 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;
}

I used transform: scale to enlarge the element after hovering over the option. However, to achieve the desired effect I have to add the position: absolute 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.

Without position:absolute the element doesn't go out of div.

Answer 1

By using transform-origin, you can remove the need to use absolute positioning. Move the origin of the transformation from the default (center) to the upper left corner (0 0):

.option {
  width: 50px;
  height: 50px;
  box-shadow: 1px 1px 1px 1px #888;
  display: inline-block;
}

.option:hover {
  transform: scale(2.25, 2.25);
  transition-duration: 0.01s;
  z-index: 1;
  transform-origin: top left;
}

<div>
  <div class="option"></div>
  <div class="option"></div>
  <div class="option"></div>
  <div class="option"></div>
</div>