How to use CSS transform size() but to element float over other HTML elemts on hover

Question

So what I want to do is basically the image below. I want to make the div element on hover resize and be above all other elements without them moving.

What I imagined as code:

div {
    display: flex;
}

div .childDivs {
    width: 15rem;
    height: 15rem;
}

div .childDivs:hover {
    transform: scale(1.01);
}

<div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
    <div class="childDivs"></div>
</div>

Answer 1

You’re pretty close. Your scale needs to be larger than 1.01, though, that’s such a small increase it’s difficult to spot.

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 2em;
}

.cards>div {
    width: 5rem;
    height: 5rem;
    background: cyan;
    border-radius: 1rem;
    transition: 0.2s;
}

.cards>div:hover {
    transform: scale(1.5);
    background: pink;
}

<div class="cards">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>