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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.