Fix background for div on hover

Hey guys, You can see in screenshot when I hover on a card the background is getting disturbed. I need it to have same style background (dark one like other two) before and after hover, can any one help me Thank you. https://codepen.io/Moksha-Nirugutti/pen/QWPOOvM
No description
5 Replies
MarkBoots
MarkBoots2mo ago
the transform on the .card:hover is creating a new stacking context that prevents deeper layers (the peudos') to go behind it. What you can do is add
.card {
transform-style: preserve-3d;
}
.card::before, .card::after{
transform: translateZ(-1px);
/* z-index: -1; not needed anymore */
}
.card {
transform-style: preserve-3d;
}
.card::before, .card::after{
transform: translateZ(-1px);
/* z-index: -1; not needed anymore */
}
MarkBoots
MarkBoots2mo ago
No description
MarkBoots
MarkBoots2mo ago
btw, you don't need to have 2 pseudos. for the gradient border you could use a background gradient clipped to the border-box on the main element that way the border-radius would be more exact https://codepen.io/MarkBoots/pen/MWROQPm
althepal78
althepal782mo ago
this is very pretty 🙂
thatsmokshanirugutti
@MarkBoots thanks Mark