Issue
<div class="container">
<div class="card></div>
</div>
.container {
height: 100%;
min-height: 100vh;
display: grid;
place-items: center;
& .card {
width: 300px;
height: 120px;
border: 4px solid #000;
border-radius: 20px;
background-color: #fff;
position: relative;
transition: scale 250ms ease;
&:hover {
scale: 1.1;
}
&::before {
content: "";
position: absolute;
width: inherit;
height: inherit;
transform: translate(10px, 10px);
background-color: black;
z-index: -1;
border-radius: inherit;
}
}
}
I expect, when I hover the parent the pseudo element should scale with the parent but not lose z-index. I try putting z-index on hover like z-index: 2; for parent and inside &:hover I try &::before{ z-index: -2; } doesn't work.
Solution
As the before pseudo element is coming inside the card element z-index won't work.You need to add the border styles to a child div it will work fine.please check this
.container {
height: 100%;
min-height: 100vh;
display: grid;
place-items: center;
& .card {
width: 300px;
height: 120px;
position: relative;
transition: scale 250ms ease;
.card-content{
border: 4px solid #000;
border-radius: 20px;
background-color: #fff;
height:100%;
position:relative;
z-index:1;
}
&:hover {
scale: 1.1;
}
&::before {
content: "";
position: absolute;
width: inherit;
height: inherit;
transform: translate(10px, 10px);
background-color: black;
border-radius: 20px;
}
}
}
<div class="container">
<div class="card">
<div class="card-content">
</div>
</div>
</div>
Hope this is what you are trying to achieve.
Answered By - Steve James
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.