CSS transform scale ignor z-index and gradient

Question

I use linear-gradient on ::after to make a object like this, a disappeared border. now I want to use scale to make one of them such active (selected) but look like it ignore z-index: -1; and show all gradient. I want to display selected one like others.

.Winter-Plans {
    width: calc(100%/5 - 16px);
    min-height: 360px;
    position: relative;
    border-radius: 20px;
    background: white;
    padding: 80px 15px 35px 15px;
    margin: 0 8px 20px 8px;
    box-sizing: border-box;
    float: left;
}

.Winter-Plans::after {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    background: linear-gradient(to top, #ddd, white);
    content: '';
    z-index: -1;
    border-radius: 20px;
}

.Winter-Plans.Selected {
    transform: scale(1.1);
}

<div class="Winter-Plans">
</div>
<div class="Winter-Plans Selected">
</div>
<div class="Winter-Plans">
</div>

There are lot of topics by this title, I tried but none of them solved my isssue. ps: I can't change html structure, for this reason I used ::after

Answer 1

transform will create a stacking context forcing the pseudo element to be painted inside an no more outside/behind your element. Related question to better understand the issue: Why can't an element with a z-index value cover its child?

Consider a different way to do the same effect by using multiple background where you don't need pseudo element

.Winter-Plans {
    width: calc(100%/5 - 16px);
    min-height: 360px;
    border-radius: 20px;
    background: 
      linear-gradient(white,white)         padding-box, /* cover only the padding area*/
      linear-gradient(to top, #ddd, white) border-box;  /* cover the border area*/
    border:1px solid transparent; /* a transparent border for our gradient */
    padding: 80px 15px 35px 15px;
    margin: 0 8px 20px 8px;
    box-sizing: border-box;
    float: left;
}

.Winter-Plans.Selected {
    transform: scale(1.1);
}

<div class="Winter-Plans">
</div>
<div class="Winter-Plans Selected">
</div>
<div class="Winter-Plans">
</div>

In case you need a solution with a transparent background and a border gradient with radius check this: Border Gradient with Border Radius