KPC
Kevin Powell - Community•3mo ago
thatsmokshanirugutti

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
MarkBoots•3mo 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
MarkBoots•3mo ago
No description
MarkBoots
MarkBoots•3mo 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
althepal78•3mo ago
this is very pretty 🙂
thatsmokshanirugutti
thatsmokshanirugutti•3mo ago
@MarkBoots thanks Mark
Want results from more Discord servers?
Add your server
More Posts
I've got an overflow warning on Firefox, but it's not regular.when I scroll down my page I get an overflow on my upper section, and when I go on that section thatI NEED HELP WITH CREATING CARDS WITH CSS(using flexbox or grids)I NEED HELP WITH CREATING CARDS WITH CSS. Everytime i create cards, i find it hard for the layout tWhy is my variable not Global ?I have successfully fetched data from an API, and can console.log it in one function but not anotherMicro Service Load BalancerBeen working on building micro services and I understand how scaling is aided through load balancersCoding responsive images the correct wayHi there! I've always wondered what the correct is to code responsive images on a website, in contaiFrontend questionI just have a simple question about front end , If I created a website using html css bootstrap and need helphi guys how do i code the pink background behind the picturesImage Not WorkingThe image is not working, even tho the path is correct.is this some kind of combinationdoes anyone know how to implement this? is it a combination of some select drop down menu and a fielRepeating-Linear-GradientWhy is my gradient starting with the dark colour when i declare the pink colour first? For context I