Position the siblings when using scaling with transform property

Question

I am implementing the CSS transform property over a division and have a use case of moving the siblings which are located next to it as per the scaling.

I tried adjusting the positions but did not work and thought this is how the transform functions. I might be wrong so want to give a one more try here.

.parent{
  display:flex;
}
.childA{
  padding: 1rem;
  width: 20rem;
  background: lightblue;
}
.childA:hover {
  transform: scale(5);
  transform-origin:top left;
  z-index:0;
}
.childB {
  border: solid 1px;
  color:white;
  padding: 1rem;
  background: red;
  z-index:1 /*Not sure why I had to do this too*/
}

<div class='parent'>
   <div class='childA'>Child A scales</div>
   <div class='childB'>I want to move when scaled</div>
</div>

Please take a look at this playground where the child element is just staying there but I need it to move towards the right https://codepen.io/frank-underwood/pen/jOOmLJO?editors=1100

Answer 1

.parent{
  display:flex;
}
.childA{
  padding: 1rem;
  width: 20rem;
  background: lightblue;
}
.childA:hover {
  transform: scale(5);
  transform-origin:top left;
  z-index:0;
}

.childA:hover + .childB {
  transform: translateX(calc(22rem * 4));
}
.childB {
  border: solid 1px;
  color:white;
  padding: 1rem;
  background: red;
  z-index:1
}

<div class='parent'>
   <div class='childA'>Child A scales</div>
   <div class='childB'>I want to move when scaled</div>
</div>

I'm not sure how much you're wanting to move it, or where.. Here is code to make it move on the hover of your scaling element. I'm using the adjacent CSS combinator to make this happen. When you're hovering ChildA, the adjacent ChildB can be given a set of properties.

As for why you had to put a z-index on .childB was because transforms create a new stacking context. Even though .childA comes before .childB in your HTML, the transform essentially brings .childA to a new layer. Therefore, you have to set .childB's z-index.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Here's some reading about stacking context. It's really important to understand how these work and what creates new ones.

edit You can calc the translate based off the element your hovering and it will consistently move. I added 2rem to the width because you have 1rem of padding on either side. 22rem * 4 instead of 5 because scale(1) = 22rem.